React点击按钮调用setState修改背景色未触发页面渲染问题求助

问题原因 #

• State 方法定义在MyHeader的render函数内部，属于局部函数，既没有绑定正确的this指向，也无法被外部的Test组件访问。
• Test是函数组件，不存在this指向，按钮onClick绑定的this.State属于无效调用，根本不会执行状态更新逻辑。
• 背景色状态目前定义在每个MyHeader实例的内部，父组件默认没有权限直接修改子组件的内部状态。

修复方案 #

你可以把背景色状态提升到父组件Test中管理，再通过props传递给MyHeader组件，修改后的可运行代码如下：

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      borderRadius: "10px",
      background: this.props.backgroundColor,
      padding: "10px",
      width: "100px",
      height: "100px",
      marginTop: "10px",
      lineHeight: "80px",
      color: "dimGrey",
      fontWeight: "bold",
      fontSize: "3em",
      textAlign: "center"
    };
    return (
      <div>
        <h1 style={mystyle}></h1>
        <h1>{this.props.backgroundColor}</h1>
      </div>
    );
  }
}

function Test() {
  const [change, setchange] = React.useState(1)
  // 把背景色状态提到父组件管理
  const [bgColor, setBgColor] = React.useState('blue')
  
  function handleClick() {
    // 要随机颜色可自行替换为随机色值生成逻辑
    setBgColor('red')
    setchange(change + Math.floor(Math.random() * 10));
    if(change > 20) {
      setchange(change + Math.floor(Math.random() - 10))
    }
  }

  return (
      <div>
      <h1>click the button to randomize colors</h1>
      <button onClick={handleClick}>Randomize colors!</button>
      <div className='flex-item'></div>
      <h1>{change}</h1>
     <div className="flex-item"></div>
      
      <MyHeader backgroundColor={bgColor} />
      <MyHeader backgroundColor={bgColor} />
 
      </div>
  );
}

ReactDOM.render(<Test />, document.getElementById("root"));

额外说明 #

如果你不想把状态提升到父组件，也可以在MyHeader的构造函数中绑定修改状态的方法，再通过ref获取子组件实例调用，不过更推荐状态提升的写法，更符合React的单向数据流设计规范。

内容的提问来源于stack exchange，提问作者eddie delgatto