setState（）不会触发重新渲染

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

}

从每个长方体组件调用update函数，并触发长方体网格上新颜色的指定。

试图避免常见的错误：

• 颜色数组只有在通过扩展运算符从状态复制后才被修改
• 通过setState（）传递新数组
• 此外，我还处理了两个组件中函数的实例绑定

但是，尽管onClick成功触发了状态更改，但不会进行重新渲染。我在这里缺少的另一个方面是什么？

非常感谢！

Answer 1

Box.js使用this.state.color作为背景颜色，它永远不会改变，因为每个框只调用一次构造函数。您可能想要使用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}
      />
    )
  }
}