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

我读过：

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

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

boardCreation:function（）{
var board=[]；
对于（变量i=0；i<6；i+=1）{
board.push（）；
}; 
返回板；
},
getInitialState:函数（）{
返回{
imagesArray:this.shuffleImage（['walle.jpg'，'walle.jpg'，'eve.jpg'，'john.jpg'，'captain2.jpg'，'mary.jpg'），
翻转：[假，假，假，假，假，假]，
FlippedImage:[]，
walleCount:0，
board:this.boardCreation（），
}
},

上面返回的“未捕获的TypeError:无法读取属性”imagesArray“为null”

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

---

多谢各位

问题是由于您在

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

boardCreation:函数（图像，翻转）{
images=images | | this.state.images；
翻转=翻转| | this.state.flipped；
var self=这个；
返回images.map（函数（image，i）{
返回；
});
},
getInitialState:函数（）{
var images=this.shuffleImage（['walle.jpg'，'walle.jpg'，'eve.jpg'，'john.jpg'，'captain2.jpg'，'mary.jpg']）；
var flipped=[假，假，假，假，假，假]；
返回{
图像莎拉：图像，
翻转：翻转，
FlippedImage:[]，
walleCount:0，
电路板：此。电路板创建（图像，翻转），
};
}

---

我还建议您以更面向对象的方式重构代码：您可以拥有一个card对象，其中包含属性

图像
，
翻转
，
索引
，等等。
这个问题是由您在
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),
    };
}

boardCreation:函数（图像，翻转）{
images=images | | this.state.images；
翻转=翻转| | this.state.flipped；
var self=这个；
返回images.map（函数（image，i）{
返回；
});
},
getInitialState:函数（）{
var images=this.shuffleImage（['walle.jpg'，'walle.jpg'，'eve.jpg'，'john.jpg'，'captain2.jpg'，'mary.jpg']）；
var flipped=[假，假，假，假，假，假]；
返回{
图像莎拉：图像，
翻转：翻转，
FlippedImage:[]，
walleCount:0，
电路板：此。电路板创建（图像，翻转），
};
}

我还建议您以更面向对象的方式重构代码：您可以拥有一个card对象，其中包含属性
图像
，
翻转
，
索引
，等等。
这个问题是由您在
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),
    };
}

boardCreation:函数（图像，翻转）{
images=images | | this.state.images；
翻转=翻转| | this.state.flipped；
var self=这个；
返回images.map（函数（image，i）{
返回；
});
},
getInitialState:函数（）{
var images=this.shuffleImage（['walle.jpg'，'walle.jpg'，'eve.jpg'，'john.jpg'，'captain2.jpg'，'mary.jpg']）；
var flipped=[假，假，假，假，假，假]；
返回{
图像莎拉：图像，
翻转：翻转，
FlippedImage:[]，
walleCount:0，
电路板：此。电路板创建（图像，翻转），
};
}

我还建议您以更面向对象的方式重构代码：您可以拥有一个card对象，其中包含属性
图像
，
翻转
，
索引
，等等。
这个问题是由您在
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),
    };
}

boardCreation:函数（图像，翻转）{
images=images | | this.state.images；
翻转=翻转| | this.state.flipped；
var self=这个；
返回images.map（函数（image，i）{
返回；
});
},
getInitialState:函数（）{
var images=this.shuffleImage（['walle.jpg'，'walle.jpg'，'eve.jpg'，'john.jpg'，'captain2.jpg'，'mary.jpg']）；
var flipped=[假，假，假，假，假，假]；
返回{
图像莎拉：图像，
翻转：翻转，
FlippedImage:[]，
walleCount:0，
电路板：此。电路板创建（图像，翻转），
};
}

我还建议您以更面向对象的方式重构代码：您可以拥有一个卡片对象，其中包含属性
图像
，
翻转
，
索引
，等等。
感谢您的建议和重新分解-您的代码在images.map函数调用的参数列表后显示未捕获的语法错误：missing），即使我在
return images.map（（image，I）=>{return（）}中包含另一个括号
您正在传输到ES5吗？不确定-使用
jsx——查看src/build/
确定，那么您就没有了。我已经在ES5中重写了。现在
this.onCardFlip
I