Question

尽管试图避免所有记录在案的陷阱，这些陷阱会阻止 React 在状态更改后重新呈现，但我仍然无法弄清楚我的问题：

// Grid.js, render a grid of random-colored boxes

constructor(props){
        super(props); 
         this.initialcolors = this.initialcolors.bind(this); 
         this.updatecolors = this.updatecolors.bind(this);  
         this.state = {colors: this.initialcolors()}
    }

// ...

    updatecolors(index){
    let currentColors = [...this.state.colors];
    let currentColor = currentColors[index];
    let newColors = this.props.colors.filter(c => c !== currentColor)
    let newColor = newColors[Math.floor(Math.random() * newColors.length)];
    currentColors[index]=newColor; 
    this.setState(st => ({colors: currentColors}))
}

render(){
     return(<div>
           {this.state.colors.map( (color, index) => 
              <Box key={index} position={index} color={color} updatefunc={this.updatecolors} className="Box.css"/>
           )}
            </div>)
}

// Box.js, the colored box, onClick triggers state-change by calling updatefunc from parent

constructor(props){
    super(props);
    this.state = {color: this.props.color}; 
    this.changeColor = this.changeColor.bind(this); 
}

changeColor(evt){
    this.props.updatefunc(this.props.position); 
}

render(){
    return(
    <div style={{backgroundColor: this.state.color, 
                 height: 100, 
                 width: 100, 
                 padding: 0.5}} 
         onClick={this.changeColor}> </div>
    )
}

}

从每个框组件调用更新函数并触发框网格上新颜色的分配。

尽量避免常见错误：

颜色数组仅在通过扩展运算符从状态复制后才被修改
新数组通过 setState() 传递
此外，我还负责两个组件中函数的实例绑定

然而，尽管 onClick 成功触发了状态更改，但并没有发生重新渲染。我在这里缺少的其他方面是什么？

非常感谢！

Answer 1

Box.js 使用 this.state.color 作为 backgroundColor，它永远不会改变，因为每个框只调用一次构造函数。您可能想要使用 this.props.color，它的颜色已从 Grid 更改。

class Box extends Component {
  constructor () {
    super();
    this.changeColor = this.changeColor.bind(this); 
  }

  changeColor (evt) {
    this.props.updatefunc(this.props.position); 
  }

  render () {
    return (
      <div
        style={{
          backgroundColor: this.props.color, 
          height: 100, 
          width: 100, 
          padding: 0.5
        }} 
        onClick={this.changeColor}
      />
    )
  }
}

setState() 不会触发重新渲染

1 个答案: