子组件不会在状态更改时更新

Question

我正在尝试将值传递给子组件，但随着父组件值的更改，该值不会更新。 这是我的工作

子组件：

class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: this.props.data,
    }
  }

  render() {
    return(
      <div>{this.state.data}</div>
    )
  }
}


export default Test;

父js文件

constructor(props) {
  super(props)
  this.state = {
    val: 0,
  }
  this.addVal = this.addVal.bind(this)
}

addVal() {
  let val = this.state.val
  val = val + 1
  console.log(val)
  this.setState({
    val
  })
}
render() {
  return(
    <div>
      <Button onClick={this.addVal}> add </Button>
      <Test data={this.state.val} />
    </div>
  )
}

该值在父组件上得到更新，但是，子组件没有在更新后的值。 我想念什么？

Answer 1

该constructor()在开始时仅运行一次 。 父项更新后，它将向Test发送新的props ，但是在第一次渲染组件后，它不会将state.data更改为props.data

您正在打印未更新的this.state变量。 相反，您应该从this.props打印值

render(){
    return(
      <div>{this.props.data}</div>
      )
}

如果要检测新道具，可以使用compnentWillRecieveProps()

componentWillRecieveProps(nextProps){
    this.setState({data:nextProps.data})
}

Answer 2

子组件中不需要state 。 呈现this.props.data应该足够了，因为这就是您从父级传递给子级的内容。