reactjs - React 组件未从 props 更新

Question

我已经简化了代码来隔离和重现问题，因此在实际实现中可能没有意义:

import React, { Component } from 'react'

const obj = {
    objProp: true
};

export default class MyButtonContainer extends Component {
    render() {
        return (
            <MyButton
                onClick={() => {obj.objProp = !obj.objProp;}}
                text={obj.objProp.toString()}
            />
        );
    }
}

class MyButton extends Component {
    render() {
        return (
            <button
                onClick={this.props.onClick}
            >
                {this.props.text}
            </button>
        )
    }
}

您可以看到 obj.objProp 被分配到 MyButton.props.text 中，并且当您单击 MyButton 的实例时，它的值会被切换。 obj.objProp 的值确实按预期更改，但 MyButton 不会更新和重新渲染。

我的问题是为什么 MyButton 没有更新，实现这种逻辑的正确方法是什么？

此外，如果解决方案是将 obj 插入 MyButtonContainer.state，那么如果我使用 Redux，它只将数据注入(inject) props 而不改变状态，为什么 MyButton 会更新？

谢谢:)

Answer 1

你需要的是一个状态，你不应该以这种方式使用变量，它需要处于状态并异步更改该状态。

将按钮容器更改为此。

export default class MyButtonContainer extends Component {

  constructor() {
    this.state = {
      objProp: true
    }
    this.onclick = this.onclick.bind(this);
  }

  onclick() {
    this.setState({ objProp: !this.state.objProp })
  }

  render() {
    return (
      <MyButton
        onClick={() => { this.onclick() }}
        text={this.state.objProp.toString()}
      />
    );
  }
}

Demo