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

回答

相關問題