为什么 Redux store 显示我的状态，但 react 组件说它未定义？答案

【问题标题】：Why does Redux store show my state, but react component says its undefined?为什么 Redux store 显示我的状态，但 react 组件说它未定义？
【发布时间】：2020-03-16 17:58:52
【问题描述】：

我正在使用 react-redux 构建一个应用程序，但我的 redux 商店有问题。我可以从 Redux devTools 中看到，当我单击 RenderPlayerTransferList 内的元素时，动作创建者被正确调用并且存储更新。但是，当尝试访问this.props.currentSquad（由操作创建者更新的状态对象，然后我将其映射到道具）时，反应组件本身返回未定义。有谁知道这是为什么？（注意我使用的是 redux thunk）

相关代码：

主要反应组件的相关代码：

handleTransferPlayerClick=(playerId)=>{

            if (this.props.selectedPlayerFromTeamSheet){
                this.props.addPlayerToSquad(playerId)


                //add new squad into playerIconProps

                this.playerIconProps.playerNames[this.props.selectedPlayerFromTeamSheet.iconKey] = this.props.players[this.props.currentSquad.newAdditions]
                console.log(this.playerIconProps)

            }
        }

const mapStateToProps=(state)=>{
    return {players:Object.values(state.playerDatabase),
            selectedPlayerFromTFLId:state.transfers.TFLPlayerId,
            selectedPlayerFromTeamSheet:state.transfers.selectedPlayer,
            currentSquad: state.squad
    }

}

export default connect(mapStateToProps, {getPlayers, selectPlayerFromTFL, selectPlayerFromTeamSheet, addPlayerToSquad})(Transfers)

动作创建者

export const addPlayerToSquad = (playerId)=>{

    return (dispatch, getState) => {
        const state = getState().transfers


        const payload = {currentSquadMemberId: state.selectedPlayer.iconKey, newSquadAdditionId: playerId}

        //recives object with playerId and Iconid t
        dispatch({type:ADD_PLAYER_TO_SQUAD, payload:payload})
    }
}

减速器


const squadDatabase = {currentSquad: {
    0: null,
    1: null,
    2:null,
    3:null,
    4:null,
    5:null,
    6:null,
    7:null,
    8:null,
    9:null,
    10:null,
    11:null,
    12:null,
    13:null,
    14:null,
    15:null
    }, newAdditions: null}

export default (state=squadDatabase, action)=>{

    switch(action.type){
        case ADD_PLAYER_TO_SQUAD:
            return {...state, currentSquad: {...state['currentSquad'], [action.payload.currentSquadMemberId]:action.payload.newSquadAdditionId}, newAdditions: action.payload.newSquadAdditionId}
        default:
            return squadDatabase
    }
}

减速器组合在这里...

export default combineReducers ({
    // set state object to auth
    auth: authReducer,
    form: formReducer,
    playerDatabase: playerDatabaseReducer,
    transfers: transfersReducer,
    squad: squadReducer
})

【问题讨论】：

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

如果不运行它，您可能需要更改

return squadDatabase

到

return state

否则看起来该值将始终是硬编码的？

在mapStateToProps中，更改

currentSquad: state.squad

到

currentSquad: state.squad.currentSquad

【讨论】：