在从 reducer React/Redux 更新状态后调用 componentWillReceiveProps()答案

【问题标题】：Call componentWillReceiveProps() after state is getting updated from reducer React/Redux在从 reducer React/Redux 更新状态后调用 componentWillReceiveProps()
【发布时间】：2017-03-22 01:08:05
【问题描述】：

我有 2 个组件

1] 父母
2] 孩子

我将父组件操作传递给子组件，以便在更改下拉列表时被调用。

父组件方法是调用商店的函数（ajax 调用）并更新状态变量。更新状态后，我想在 componentWillReceiveProps() 中执行一些操作，但它没有进入 componentWillReceiveProps()。

下面是父组件中的代码 -

1 ] 父级

   componentWillReceiveProps(props) {
    this._setTrackToParams(props)
    debugger;
    let liveVideoList = this.state.liveVideoList
    if(props.liveRaceVideos != null && _.isEmpty(this.state.liveVideoList)) {
        console.log('live race video if')
        this.state.liveVideoList.push(props.liveRaceVideos)
        this.setState(this.state)
    } else if(props.liveRaceVideos != null && this.selectedKey) {
        console.log('live race video else')
        this.state.liveVideoList[this.selectedKey] = props.liveRaceVideos
        this.setState(this.state)
    }
    console.log("bye")
}

  renderChild() {
    let selectValue = !this.selectedKey ? this.props.params.trackCode : this.selectedKey
    if(this.state.liveVideoList) {
        return _.map(this.state.liveVideoList,(value , key) => {
             if(key < 3) {
                return (
                    <LiveVideoPanel ref = "liveVideoPanel" key = {key} currentTracks = {this.props.currentTracks} liveVideos = {value} selectedValue = {selectValue} onChange = {this._toggleVideos} onChangeTrackList = {this.onChangeTrackList.bind(this)} videoCount = {key}/>
                )
             }
        })
    }
}


    onChangeTrackList(id, key) {
    if(id) {
        this.selectKey = key
        this.props.fetchLiveRaceVideo(id)
    }
}

所以我在更改下拉列表时调用 this.onChangeTrackList() 函数。这个函数在内部调用 this.props.fetchLiveRaceVideo(id) 动作。我从这个 ajax 调用中得到“链接”。并且该链接的状态正在更新。

状态更新后我想调用 componentWillReceiveProps() ，但这没有被调用。

【问题讨论】：

您是否确认您的操作this.props.fetchLiveRaceVideo 正在被调用？您是否已验证此操作正在调度您期望的操作类型？另外，您是否检查过处理分派操作类型的化简器返回的状态是什么？

标签： reactjs redux react-redux

【解决方案1】：

可能没有调用 componentWillReceiveProps，因为正在调用 componentWillMount。我会输入一个console.log，看看是不是这样。

来自文档：

React 在挂载期间不会使用初始道具调用 componentWillReceiveProps。如果组件的某些道具可能会更新，它只会调用此方法。调用 this.setState 一般不会触发 componentWillReceiveProps。

【讨论】：