我读过了:
ReactJs: How to pass the initial state while rendering a component?
ReactJS: Why is passing the component initial state a prop an anti-pattern?
我仍然无法解决此问题 . 即 - 使用依赖于父组件的初始状态的props呈现子组件声明的数组 .
我是新手,对发展有点新意 . 任何帮助,将不胜感激 .
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:无法读取属性'imagesArray'为null' .
最初我在这个父组件的渲染功能中创建了电路板 - 但是每次游戏结束和新游戏开始时,电路板和所有其他状态都需要重置 .
谢谢 .
1 回答
问题是由于您在
getInitialState
函数中调用this.boardCreation()
这一事实引起的 . 因此,尚未创建初始状态,这就是为什么你有null
.要解决此问题,您只需重构代码即可
我还建议以更多的OOP方式重构你的代码:你可以有一个卡对象,持有
image
,flipped
,index
等属性 .