Question

我的父组件是这样的：

export default class MobileCompo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
            datasets: {}
        };
        this.get_data = this.get_data.bind(this);
    }

    componentWillMount() {
        this.get_data();
    }


    async get_data() {
        const ret = post_api_and_return_data();
        const content={};
        ret.result.gsm.forEach((val, index) => {
            content[val.city].push()

        });
        this.setState({data: ret.result.gsm, datasets: content});
    }

    render() {
        console.log(this.state)
        // I can see the value of `datasets` object
        return (
            <div>
                <TableElement dict={d} content={this.state.data} />
                <BubbleGraph maindata={this.state.datasets} labels="something"/>
            </div>
        )
    }

}

子组件：

export default class BubbleGraph extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            finalData: {datasets: []}
        };
        console.log(this.props);
        // here I can't get this.props.maindata,it's always null,but I can get labels.It's confusing me!
    }


    componentWillMount() {

        sortDict(this.props.maindata).forEach((val, index) => {
            let tmpModel = {
                label: '',
                data: null
            };
            this.state.finalData.datasets.push(tmpModel)
        });
    }

    render() {
        return (
            <div>
                <h2>{this.props.labels}</h2>
                <Bubble data={this.state.finalData}/>
            </div>
        );
    }
}

我尝试了很多次，但仍然没有工作，我认为原因是await/async，但TableElement效果很好，BubbleGraph也可以labels }。

我还尝试给datasets一个常量但是子组件仍然无法得到它。我用过这个：

this.setState({ datasets: a});

BubbleGraph有效。所以我不能在异步方法中设置两个状态？

很奇怪，我错过了什么吗？

任何帮助都会非常感激！

Answer 1

在子组件内添加componentWillReceiveProps，并检查是否获取数据。

  componentWillReceiveProps(newProps)
    {
       console.log(newProps.maindata)
    }

如果是，原因是constructor方法只被调用一次。在父组件的下一个setState上，子组件的componentWillReceiveProps ()方法接收新的道具。在初始渲染时不会调用此方法。

Answer 2

儿童部分的几处变化：

*根据DOC，从不直接变异状态变量 this.state.a=''或this.state.a.push()，始终使用setState来更新{{1}值。

*使用state每当componentwillrecieveprops值发生任何变化时都会调用它，因此，只要您在props中进行更改，就可以避免使用asyn父组件的所有子组件都将获得更新值。

使用此子组件：

state

React子组件无法获得props.object

2 个答案: