javascript - 在 React Redux 中更新嵌套状态,语法有什么问题?有没有更好的方法来编写这个 reducer ?

标签 javascript arrays object redux react-redux

我正在尝试更新这个名为 lobby 的嵌套状态。这就是“大堂”的样子:

this.props = {
    lobby: [ 
        {
            id: 1,
            game: "Basketball",
            teams: 2,
            description: "Come!",
            filled_slots: 4,
            max_slots: 6,
            location_name: "cherry park",
            zipcode: "96024",
            active: true,
            eventDate: new Date(2018, 8, 20, 18),
            current_players_id: {
                 team1: [
                    1
                 ],
                 team2: [
                    2,
                    3,
                    4
                 ]
            }
        },
    {...},
    {...},
    ]
}

这是我到目前为止为更新团队编写的更新函数,我在返回语句中的语法上遇到了一些问题,因为我使用的是传递的参数。非常感谢任何帮助或建议!

// Parameters passed to the reducer via action
gameId = 1
newTeams = { // passing newTeams to remove player from teams before adding
         team1: [
            1
         ],
         team2: [
            3,
            4
            ]
        }
 team = 'team2'
 userId = 2


// reducer
export const lobbyListReducer = ( state = intitialState, action = {}) => {
switch(action.type) {
    case JOIN_TEAM: 
        const { gameId, newTeams, team, userId } = action.payload;
        // console.log(action.payload)
        const lobbyIndex = () => {
            return state.lobby.findIndex(lobby => {
                return lobby.id === gameId
            })
        }
        // I have syntax errors below
        return {
            ...state, 
            lobby: [
                ...state.lobby, 
                state.lobby[ lobbyIndex() ]: {
                    ...state.lobby[ lobbyIndex() ],
                    state.lobby[ lobbyIndex() ].current_players_id: { 
                            ...newTeams, 
                            [team]: [ 
                                ...state.lobby[ lobbyIndex() ].current_players_id[team], 
                                userId
                            ] 
                        }
                    }
                }
            ]
        }
    default:
        return state;
}
}

当使用参数来引用对象数组中的嵌套级别时,传递参数的正确方法是什么?

此外,这种数据结构是处理状态数据的最佳方式吗?

最佳答案

lobby 是一个数组,您不能使用 state.lobby[ lobbyIndex() ]: { 来更改数组中的元素。此外,您不需要在一个语句中更改所有内容。分几步做。首先构建最内层的数组,然后构建下一个上层,然后再构建下一个,直到获得最终结果。

喜欢

const lobby = state.lobby[lobbyIndex()]
const newTeam = lobby.current_players_id[team].slice()
newTeam.push(userId)
const newLobby = {...lobby, ...{current_players_id: {...lobby.current_players_id, ...{[team]: newTeam}}}}
return {...state, lobby: newLobby}

关于javascript - 在 React Redux 中更新嵌套状态,语法有什么问题?有没有更好的方法来编写这个 reducer ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52067042/

相关文章:

javascript - 使用 ID 或对象访问 DOM 元素哪个更好?

javascript - 无法将 NaN 替换为 0 - 尝试了 rapply

javascript - 使两个文本区域并排共享一个灵活的边框

javascript - 如何用 Sinon.JS 去除 google.maps 库?

c++ - 为什么这些数组在本地时起作用,而在全局时却不起作用?

javascript - 查找数组的最大切片 | Javascript

java - 难以理解类对象和构造函数

javascript - 如何从对象数组中获取键和子键?

javascript - Jquery ajax 请求完成但 Axios 失败

c++ - 将二维对象数组的指针传递给方法