javascript - 为什么 Redux 存储显示我的状态，但 react 组件说它未定义？

Question

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

相关代码:

主要 react 组件的相关代码:

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)

Action 创作者

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})
    }
}

reducer

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
    }
}

reducer 在这里合并...

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

Answer 1

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

return squadDatabase

到

return state

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

然后在 mapStateToProps 中，更改

currentSquad: state.squad

到

currentSquad: state.squad.currentSquad