时间戳

首页 > 解决方案 > React js state props 在组件挂载后如何工作？

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

问题描述

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

在父母我这样设置：

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

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

标签： javascriptreactjsstatereact-props

解决方案

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

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

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

推荐阅读