javascript - 组件挂载后，React js state props 如何工作？

Question

我如何使用我的状态并通过 Prop 在我的组件子组件上使用？因为我想在我的子组件中使用单位等数据。

在父级中我设置如下:

const { unit } = this.state

然后我用 props 调用子组件

...
export default EditData extends Component {
  constructor(props){
    super(props)

    this.state = {
      dataId: this.props.match.params.id,
      ...,
      measurement: ''
    }

    this.onTextboxChangeMeasurement = this.onTextboxChangeMeasurement.bind(this)
  }

  onTextboxChangeMeasurement(event){
    this.setState({
      measurement: event.target.value
    })
  }

  getData(){
    this.DataTicker.data(this.state.dataId)
      .then(res => {
        this.setState({
          ...,
          measurement: res.measurement
        })
      })
  }

  render(){
    const {
      dataId,
      measurement
    } = this.state
    return(
      <DataTickerItem dataId={dataTickerId} unit={measurement}/>
    )
  }  
}

当我执行console.log(measurement)时，我看到2个结果第一个是空白，第二个是值。

我想在我的 child 身上使用该值，但我不能，因为该单位始终设置为第一个结果。

Answer 1

当您设置unit={measurement}时在您的 child 中，这意味着 - 设置 child 的 unit变量值至measurement (来自家长)。但你没有提到 measurement 的任何值(value)在你的 parent 身上。如果您const { unit } = this.state对于你的 parent 来说，这会更有意义:

<DataTickerItem dataId={dataTickerId} unit={unit}/>

现在您的 DataTickerItem 应该有 unit已分配的变量 unit来自其父级。