Question

我有3个组件我在父级中声明了一个函数，并将其发送给子级以获取回调，子组件将该方法发送给它的子级。

在更改下拉列表选项时调用该函数，并从reducer更新状态。但是在更新状态之后，渲染函数不会被调用。

1]父方法

     onChangeTrackList(id, key) {
    if(id) {
        this.selectKey = key
        console.log(id+'comp'+key)
        this.props.fetchLiveRaceVideo(id, key)
    }
}

And passing this to below child 

<LiveVideoPanel  key = {key}  onChangeTrackList = {this.onChangeTrackList.bind(this)}/>

2]儿童成分 - Child在其他方法中调用此方法，并将该方法作为道具传递给其他子项。

     _onChangeTrackList(key, trackId) {
    if(trackId) {
        this.props.onChangeTrackList(trackId, key)
    }
}

<ReactSelect onChange = {this._onChangeTrackList.bind(this, this.props.videoCount)} />

现在这已正常运行并在reducer中更新状态。但是，即使在reducer中更新状态后，我的父组件的渲染函数也没有被调用。

下面是我的容器代码，它正在调度此操作

import { connect } from 'react-redux'
import Wagers from 'pages/wagers'
import { getWagers } from 'actions/wagers'
import {getAccountBalance} from 'actions/authentication'
import { fetchLiveRaceVideo, toggleVideosx} from 'actions/liveTrackVideo'

  const mapStateToProps = (state) => {
    return {
        liveRaceVideos: state.liveTrackVideo.liveRaceVideos
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
    fetchLiveRaceVideo: (track, index) =>  {     dispatch(fetchLiveRaceVideo(track, index)) },
    toggleVideosx: () => { dispatch(toggleVideosx())}
}
}

const wagers = connect(
    mapStateToProps,
    mapDispatchToProps)
(Wagers)

   export default wagers

减速机 -

 import actions from 'actions'

export const liveTrackVideo = (state = [] , action) => {
switch(action.type){
    case actions.GET_LIVE_RACE_VIDEO_FAILURE: {
        return {
            isFetchingLiveRaceVideos: false,
            fetchLiveRaceVideosErrors: action.error,
            liveRaceVideos: [action.liveRaceVideos]
        }
    }
   // Below is response  ( I am getting updated state from here)
    case actions.GET_LIVE_RACE_VIDEO_PANEL_SUCCESS:
    {
        state.liveRaceVideos[action.index] = Object.assign(action.liveRaceVideos, {'index': action.index})

        return Object.assign({}, state, {
            isFetchingLiveRaceVideos: false,
            fetchLiveRaceVideosErrors: null,
            liveRaceVideos: state.liveRaceVideos
        })
    }
    case actions.TOGGLE_VIDEO:
        {
            return Object.assign({}, state, {
                isFetchingLiveRaceVideos: false,
                fetchLiveRaceVideosErrors: null,
                liveRaceVideos: [...state.liveRaceVideos, {'error': 0 , 'link' : ''}]
            })
        }
    default :
        return state
}

}

Answer 1

似乎正在传递函数以将商店更新到您的父组件，但您没有订阅redux商店更新。

它看起来像这样：

connect(
  (state) => ({yourKey: state...}),
  (dispatch) => ({fetchLiveRaceVideo: (id, key) => dispatch(...)})
)(LiveVideoPanel)

此外，您传递给Reducer的状态应该是不可变的。尝试将liveRaceVideos键更新为以下内容：

const newLiveRaceVideo = Object.assign(action.liveRaceVideos, {'index': action.index})

return Object.assign({}, state, {
    isFetchingLiveRaceVideos: false,
    fetchLiveRaceVideosErrors: null,
    liveRaceVideos: state.liveRaceVideos.slice(0, action.index).concat(newLiveRaceVideo, ...state.liveRaceVideos.slice(action.index + 1))
}

Answer 2

您没有更改liveRaceVideos变量的引用。

你的情况应该是这样的：

var liveRaceVideos = state.liveRaceVideos || [];
liveRaceVideos = [...liveRaceVideos];
liveRaceVideos[action.index] = Object.assign(action.liveRaceVideos, {'index': action.index});
 return Object.assign({}, state, {
            isFetchingLiveRaceVideos: false,
            fetchLiveRaceVideosErrors: null,
            liveRaceVideos: liveRaceVideos
        })

Reducers状态更新不调用父组件的render函数。反应/终极版

2 个答案: