Question

我正在构建一个whack-a-mole应用程序，并且具有以下组件：

每个row
生成一个index的随机数，用于显示痣从哪个孔弹出

这将每行生成5个孔，并且带有随机生成的索引的孔将得到一个布尔值以标记是否有痣。

点击mole时

它调用一个函数，通过分配一个新的随机数来更改Row组件的状态。
console.log()表明它确实重新生成了一个随机数，并且与每个Hole组件映射的变量也接收了新的，更新的Hole组件，这些组件具有新索引以具有mole。

挑战
初始渲染效果很好。痣位于随机的孔中，单击时痣会消失。

但是，没有mole出现在新索引上，hole组件也没有重新呈现，因为这些组件console.log()都没有出现。

即使父母的状态发生了变化，holes组的新道具也被重新渲染，为什么Hole组件从未真正运行？

更改孔号的方法在Row组件中，并且还有用于容纳新组件的数量和变量。

所以我想问题可能出在Hole组件中。

class Rows extends Component{
    
    state = { holeNum: null  };

    componentWillMount() {
       this.changeSpot();
    };

    changeSpot = () => {
       // console.log(this.state.holeNum);
       let random = Math.floor(Math.random() * Math.floor(5));
       this.setState({ holeNum: random });
       // console.log("Spot changed ", this.state.holeNum, random)
    }

    render() {        
       // console.log("ROW ", this.props.id)
       let holes = [0,1,2,3,4];
       // console.log(this.state.holeNum)
       let row = holes.map(idx => {
          // if holeNum is equal to index has mole is true
          // console.log("rerendering")
          let moleRender = false;
          if(this.state.holeNum === idx){
              moleRender = true;
              // console.log(idx, moleRender, this.state.holeNum)            
          };
            
          return (
            <Hole
               changeSpot={this.changeSpot}
               updateScore={this.props.updateScore}
               hasMole={moleRender}
            />
          );
       });

       // console.log(row)

       return (
          <div className="Row">
             {row}
          </div>
       );
    };
};

这是Hole组件

class Hole extends Component{
    
    state = { hasMole: false };

    componentWillMount(){
       // console.log("Comp will mount Hole")
       if(this.props.hasMole===true){
          // console.log(this.props.hasMole)
          this.setState({hasMole:true});
       };
    };

    moleClickedHandler = () => {
       this.setState({ hasMole:false });
       // this.props.updateScore()
       this.props.changeSpot();
    };
    
    render() {
       let mole = null;
       if(this.state.hasMole === true){
           // console.log(this.state.hasMole)
           mole = <Mole clicked={this.moleClickedHandler} />;
       };

       return (
           <div className="Hole">
              {mole}
           </div>
       );
    };
};

谢谢！

Answer 1

我想您会在开发人员工具的控制台中收到一条与缺少“关键”道具有关的警告您可以在此处进一步了解为什么需要密钥：https://reactjs.org/docs/lists-and-keys.html

您可以通过添加密钥来解决此问题

         <Hole
            key={ix}
            changeSpot={this.changeSpot}
            updateScore={this.props.updateScore}
            hasMole={moleRender}/>

父组件中的状态已更改，子组件未重新呈现

1 个答案: