react父子组件二次通信失败

问题描述:

(1) 首先父组件index.js向子组件Content.js传递信息，子组件可以得到父组件传递过来的的数据；

<div>
    <Content
        {...{ loading, sortRule, flightInfos, success, departDate, departCity, arriveCity }}
        onChange={(sortRule) => {
            this.setState({ sortRule }, () => this.init())
        }}
    />
</div>

(2) 然后子组件通过回调函数onChange向父组件传递数据；

state = {
    sortRule: this.props.sortRule
}

sortHandle = sortRule => {
    this.props.onChange(sortRule)
    this.setState({
        sortRule
    })
}

render() {
    const { sortRule } = this.state
    return(
        <li onClick={() => this.sortHandle(sortRule === '2' ? '1' : '2')}>
    )
}

(3) 子组件的回调函数onChange触发了this.setState事件，sortRule的值发生改变,再次调用子组件Content.js。 最后却发现子组件中的sortRule值没变。

解决思路

想到react的生命周期componentWillReceiveProps方法，只要props发生变化，该方法就会被调用，在这里面执行this.setState({ sortRule })

解决方法

在子组件Content.js里面加上：

componentWillReceiveProps(nextProps) {
    const { sortRule } = nextProps
    if (sortRule !== this.state.sortRule) {
        this.setState({ sortRule })
    }
}