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

Question

我已阅读：

ReactJs: How to pass the initial state while rendering a component?

ReactJS: Why is passing the component initial state a prop an anti-pattern?

我仍然无法解决这个问题。即 - 使用依赖于父组件初始状态的道具渲染一组子组件声明。

我是 reactjs 新手，对开发有点陌生。任何帮助将不胜感激。

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(),
    }
},

以上返回'Uncaught TypeError: Cannot read property 'imagesArray' of null'。

最初我在这个父组件的渲染函数中创建了棋盘 - 但是棋盘和所有其他状态将需要在每次游戏结束和新游戏开始时重置。

谢谢。

Answer 1

问题是由于您在getInitialState 函数中调用了this.boardCreation() 而引起的。因此尚未创建初始状态，这就是您拥有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),
    };
}

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