Question

在我最初的状态下，我有董事会，将其视为聊天室中的组。 setboard是一个变量，用于在使用的房间之间进行切换

activeBoard. =>

activeBoard: state.boards[initialState.setBoard],

I map the content of debates easily. The problem comes when I try to update the reducer.

const initialState = {
    setBoard: 'Feed',
    boards : {
        Feed: {
            id: 1,
            debates: [
                {
                    id: 1,
                    text: 'This is the most amazing website on the internet.",
                    Images: 'soul.jpg',
                },
                {
                    id: 2,
                    topic: 'Somebody tell him to shut up',
                    text: "This is the most amazing website on the internet.",
                    Images: 'salt.jpg',
                },
            ],
            invitations: [
                {
                    id: 1,
                    nickname: "imhotep",
                    inviteText: ' BLOCKING People block or unfriend their parents on Facebook 
                },
            ],
     }
export const BoardProvider = ({ children}) =>{
    const [state, dispatch] = useReducer(BoardReducer, initialState) 

    function AddDebates(debates){
        dispatch({
            type: 'Add-debates',
            payload: debates
        })
    }
return ( <BoardContext.Provider value={{
        boards: state.boards,
        
        activeBoard: state.boards[initialState.setBoard],
        debates: activeBoard.debates,
        AddDebates
    }}>
        {children}
    </BoardContext.Provider>)
}

This is my reducer.

export default ( state, action, activeBoard, debates,invitations) =>{
    switch(action.type) {
       case 'Add-debates':
            return { 
                ...state, 
                debates: [action.payload, ...debates]
            }
  default: 
            return state
          
    }
}

我收到一个错误：TypeError：辩论是不可迭代的我可以通过简单地映射它来进行辩论，但是可以以这种方式更新reducer。一些帮助请...

Answer 1

您需要将所有个状态级别从根目录浅层复制到要更新的debates，因为它嵌套了数个级别。正确的引用还将包括该属性的完整路径，即state.debates是未定义的，并且不是可迭代。

case 'Add-debates':
  return { 
    ...state, 
    boards: {
      ...state.boards,
      Feed: {
        ...state.boards.Feed,
        debates: [action.payload, ...state.boards.Feed.debates],
      },
    },
  }

如何正确更新减速器

1 个答案: