React子组件不会在状态更改时重新呈现

Question

我意识到这样的问题之前已经被问到，但是从阅读几个Q＆As这里似乎在很多情况下人们推荐使用componentWillUpdate但是从我（非常）基本了解React，如果我setState()将不会有子组件重新 - 如果他们受到影响？

这是我的App组件（显示正在设置的状态，更新状态handleClick的函数，显示组件（显示当前状态的输入）和显示数字的Button组件，并传递函数handleClick ：

 this.State = {
      calcValue: 0
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(val) {
    this.setState({ calcValue: val })
   }

  render() {
    return( 
      <div class="calcBody">
        <Display currentValue={this.State.calcValue} />
        <h1>Calculator</h1>
        <div class="numPad">
        <Button btn="num col1" operator={1} handleClick={this.handleClick.bind(this)} />

这是Button组件：

    class Button extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return(
/*the button when clicked takes the handleClick function and passes it props based on whatever number is pressed */
          <button onClick={() => this.props.handleClick(this.props.operator)}>
          <div class={this.props.btn}>{this.props.operator}</div>
          </button>
        )
      }
    }

最后，这是Display组件：

class Display extends React.Component {
  constructor(props){
    super(props);
    this.props = {
      currentValue: this.props.currentValue
    }
  }

  render() {
    return(
      <h1>{this.props.currentValue}</h1>
    );
  }
}

我想知道为什么在调用handleClick（val）时这不会更新？

Answer 1

你定义状态this.State这是不正确它应该小写 ： this.state ：

this.state = {
    calcValue: 0
}

另外，这一行：

this.props = {
   currentValue: this.props.currentValue
}

没有多大意义，因为道具传递到外面， 组件不应该改变它们 。