javascript - 子组件不更新状态更改

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() 只在开始时运行一次。当父级更新时，它将新的 props 发送到 Test 但它不会将 state.data 更改为 props.data 第一次渲染组件后

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

打印值

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

如果你想检测新 Prop 你可以使用compnentWillRecieveProps()

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