首页 文章

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

提问于
浏览
0

我读过了:

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 回答

  • 3

    问题是由于您在 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方式重构你的代码:你可以有一个卡对象,持有 imageflippedindex 等属性 .

相关问题