js-设置初始状态并定义在组件中利用该状态的道具

Question

boardCreation: function() {
    var board = [];
    for (var i = 0; i < 6; i+=1) {
        board.push(<Card key={i} onClick={this.onCardFlip} image={this.state.imagesArray[i]} flipped={this.flipped[i]} cardIndex={i} />);
    }; 
    return board;
},
getInitialState: function() {
    return {
        imagesArray: this.shuffledImages(['walle.jpg', 'walle.jpg', 'eve.jpg', 'john.jpg', 'captain2.jpg', 'mary.jpg']),
        flipped: [false, false, false, false, false, false],
        flippedImages: [],
        walleCount: 0,
        board: this.boardCreation(),
    }
},

Answer 1

该问题是由于在GetInitialState函数中调用this.boardCreate()而引起的。因此，初始状态尚未创建，这就是为什么null。

要解决这个问题，您可以简单地重构代码

boardCreation: function (images, flipped) {
    images = images || this.state.images;
    flipped = flipped || this.state.flipped;
    var self = this;
    return images.map(function (image, i) {
         return <Card key={i} onClick={self.onCardFlip} image={image} flipped={flipped[i]} cardIndex={i} />;
    });
},
getInitialState: function() {
    var images =  this.shuffledImages(['walle.jpg', 'walle.jpg', 'eve.jpg', 'john.jpg', 'captain2.jpg', 'mary.jpg']);
    var flipped = [false, false, false, false, false, false];
    return {
        imagesArray: images,
        flipped: flipped,
        flippedImages: [],
        walleCount: 0,
        board: this.boardCreation(images, flipped),
    };
}

我还建议以更面向对象的方式重构代码：您可以有一个card对象，包含image、flipped、index等属性。