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
}
}
答
似乎正在传递的功能更新存储到你的父组件,但是您没有订阅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))
}
答
你不改变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
})
我这样做,在容器中。我会更新我的代码。请检查一次代码。 我正在调用componentdidmount()中的页面加载方法,该方法正在调用并且状态更新正在调用render。但是当我从孩子调用它时,它只是更新状态,但不调用父组件的呈现 – Kalashir
什么是trackId?看起来好像它是来自React Select上的onChange方法的事件,但它看起来不像是一个ID –
ReactSelect组件正在返回trackid – Kalashir