Question

如果在生命周期的componentWillMount阶段调用异步操作，那么一旦该操作完成，是否有办法让willReceiveProps触发？

实施例

class asyncComponent extends react.component() {
    static propTypes = {
        data: PropTypes.object, 
        dispatch: propTypes.func
    }

    componentWillMount() {
        this.props.dispatch(actions.fetchAsnycData()) //Updates data prop once async fetch is done
    }

    render() {
        <DumbComponent data={this.props.data} />
    }

}

class DumbComponent extends react.Component() {
    static propTypes = { data: PropTypes.object }

    componentWillReceiveProps() {
        console.log(this.props.data) //never called
    }

    render() {...}

}

这里永远不会调用componentWillReceiveProps()方法，因为即使组件确实收到了props，因为该操作是在componentWillMount生命周期阶段触发的，所以它被认为是第一次渲染的一部分。

Answer 1

感谢@suthan在评论中提供的帮助，我提出了这个有效的解决方案：

class asyncComponent extends react.component() {
    static propTypes = {
        data: PropTypes.object, 
        dispatch: propTypes.func
    }

    childDidMount() {
        this.props.dispatch(actions.fetchAsnycData()) //Updates data prop once async fetch is done
    }

    render() {
        <DumbComponent data={this.props.data} 
            componentDidMount={this.childDidMount}.bind(this) />
    }

}

class DumbComponent extends react.Component() {
    static propTypes = { data: PropTypes.object, componentDidMount: PropTypes.func }

    componentWillReceiveProps() {
        console.log(this.props.data) //works!
    }

    componentDidMount() {
        this.props.componentDidMount();
    }

    render() {...}

}

我已经尝试过，将操作放在父组件的componentDidMount方法中。诀窍是意识到父组件安装在子组件之前，因此需要在子组的componentDidMount阶段触发操作。从父级传递对函数的引用允许我保留我的无状态组件并实现期望的结果。

在初始渲染周期中触发willReceiveProps

1 个答案: