Как React JS State Props работает после монтирования компонента?

Question

Как я могу использовать свое состояние и использовать на моем компоненте child по реквизиту?Потому что я хочу использовать в моем дочернем компоненте данные как единицу.

в родительском компоненте я устанавливаю так:

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 результата, 1-й пустой и 2-й со значением.

, и я хочу использовать значение для моего ребенка, но я не могу, потому что единица всегда установлена ​​в1-й результат.

Answer 1

Когда вы устанавливаете unit={measurement} в вашем дочернем элементе, это означает - установите значение переменной unit дочерних элементов в measurement (исходящий из родительского элемента). Но вы не упоминаете ни о каком значении measurement в вашем родителе. Если вы const { unit } = this.state в вашем родителе, это будет иметь больше смысла:

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

Теперь ваш DataTickerItem должен иметь переменную unit с присвоенным unit от его родителя.