反应不通过道具将状态传递给 child

Question

我正在尝试将我的 parent App 状态传递给 child 组件 Chart。

应用程序

constructor() {
    super();
    this.state = {
        dataPoints: {
            '424353': {
                date: '10/10/2016',
                qty: '95'
            },
            '535332': {
                date: '10/11/2016',
                qty: '98'
            },
            '3453432': {
                date: '10/01/2017',
                qty: '94'
            }
        }
    };
    this.addPoint = this.addPoint.bind(this);
}

addPoint(dataPoint) {
    let dataPoints = {...this.state.dataPoints};
    const timestamp = Date.now();
    dataPoints[timestamp] = dataPoint;
    this.setState({ dataPoints: dataPoints });
    console.log('new state', this.state.dataPoints);
}

render() {
    return (
        <div className="app">
            <Chart dataPoints={this.state.dataPoints} />
            <FormControl addPoint={this.addPoint} />
        </div>
    );
}

图表

composeData() {
    Object
        .keys(this.props.dataPoints)
        .forEach(key => {
            ** do stuff **
        });

    return **stuff**;
}

componentWillUpdate() {
    this.composeData();
}

addPoint 方法有效，即我可以在 React 控制台中看到新数据点已添加到状态中。但是在Chart组件中并没有体现出来。更奇怪的是（对我来说）是当我添加一个点时，addPoint 方法中的 console.log 行（上图）：

console.log('new state', this.state.dataPoints)

不显示新数据点。

Answer 1

因为 setState 是 asynchronous，使用这个你会看到更新后的值：

this.setState({ dataPoints: dataPoints }, () => {
     console.log('new state', this.state.dataPoints);
});

第二件事是，每当 props 值发生任何变化时，都会调用 componentWillReceiveProps 生命周期方法，在添加新项目后在此方法中进行计算。像这样：

componentWillReceiveProps(newProps) {
    console.log('update props values', newProps);
    Object
        .keys(newProps.dataPoints)
        .forEach(key => {
            ** do stuff **
        });

    return **stuff**;
}

查看此答案以获得完整解释：

Answer 2

在加点

addPoint(dataPoint) {
    let dataPoints = {...this.state.dataPoints};
    const timestamp = Date.now();
    dataPoints[timestamp] = dataPoint;
    this.setState({ dataPoints: dataPoints });
    console.log('new state', this.state.dataPoints);
}

在上面的代码中你看不到更新的值，因为 setState 需要时间来改变，你必须在 setState 回调中记录它

this.setState({ dataPoints: dataPoints }, function(){
    console.log('new state', this.state.dataPoints);
 });

而且在图表组件中，如果您在其中使用 this.props，则需要绑定 composeData 函数，例如

composeData = () =>{
    Object
        .keys(this.props.dataPoints)
        .forEach(key => {
            ** do stuff **
        });

    return **stuff**;
}

但是 componentWillMount 只被调用一次，因此您需要从 componentWillReceiveProps 调用 composeData 函数，就像

componentWillReceiveProps(nextProps) {
     this.composeData(nextProps)
}
componentWillMount() {
      this.composeData(this.props.dataPoints) 
 }
composeData(props){
        Object
            .keys(props.dataPoints)
            .forEach(key => {
                ** do stuff **
            });

        return **stuff**;
    }

反应不通过道具将状态传递给 child

React not passing state to child via props

javascript

components

state

reactjs