Reducers状态更新不调用父组件的渲染函数。 React/Redux

我有3个组件，其中我有一个函数在父级声明并将其发送给子进行回调，子组件将该方法发送给它的子进程。Reducers状态更新不调用父组件的渲染函数。 React/Redux

该功能在下拉选择的变化上被调用，并且从减速器更新状态。但是在更新状态之后，render函数没有被调用。

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]子组件 - 儿童正在调用其他方法此方法，并传递一个方法作为道具其他孩子。

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

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

现在这是正常运行和更新状态在减速机中。但我的父组件的渲染函数即使在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 
}

}

来源

2016-11-09 Kalashir

似乎正在传递的功能更新存储到你的父组件，但是您没有订阅Redux商店更新。

这将是这个样子：

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

而且，你传递给你的减速状态应该是一成不变的。尝试更新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)) 
}

来源

2016-11-09 08:57:53

我这样做，在容器中。我会更新我的代码。请检查一次代码。我正在调用componentdidmount（）中的页面加载方法，该方法正在调用并且状态更新正在调用render。但是当我从孩子调用它时，它只是更新状态，但不调用父组件的呈现 – Kalashir

什么是trackId？看起来好像它是来自React Select上的onChange方法的事件，但它看起来不像是一个ID –

ReactSelect组件正在返回trackid – Kalashir

你不改变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 
     })

来源

2016-11-09 09:51:52

Reducers状态更新不调用父组件的渲染函数。 React/Redux

回答

相关问题