React js state props 在组件挂载后如何工作？

Question

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

在父母中我这样设置：

const { unit } = this.state

然后我用道具调用子组件

...
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 个结果 第一个是空白，第二个是值。

我想在我的孩子身上使用这个值，但我不能因为单位总是设置为第一个结果。

Answer 1

当您在孩子中设置unit={measurement} 时，这意味着 - 将孩子的unit 变量值设置为measurement（来自父母）。但是您没有在父母中提及measurement 的任何价值。如果您在父母中const { unit } = this.state，这将更有意义：

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

现在您的 DataTickerItem 应该有一个 unit 变量，并从其父级分配了 unit。