三行代码  ›  专栏  ›  技术社区  ›  wolf

如何在状态更改时使用useReduce更新数组中的单个对象

  •  0
  • wolf  · 技术社区  · 1 月前

    我有一个复选框组件,当为复选框选择一个值时,我想用真值和假值更新我的状态。我总共有5种不同的状态。我无法从我的状态更新单个对象。有人能帮忙吗?

    在当前实现中,设置值后quizState将变得未定义

    我的减速机是这样的:

    quizState: [
        {id:0, question_id: '', answer: [] },
        {id:1, question_id: '', answer: [] },
        {id:2, question_id: '', answer: [] },
        {id:3, question_id: '', answer: [] },
        {id:4, question_id: '', answer: [] },
    ],
    
    export const appReducer = (state = appState, action) => {
    const { type, payload } = action;
    
    switch (type) {
        case SET_QUIZ_STATE:
            return state.quizState.map((quiz) => quiz.id === payload.id ? ({...quiz, payload}) : quiz)
    
        default:
            return state;
    }};
    

    我有一个钩子:

    const setQuizState = useCallback(
        (quizState) => dispatch({ type: SET_QUIZ_STATE, payload: quizState }),
        [dispatch]
    );
    

      setQuizState({ id: 0, question_id: question.question_id, answers: [true, false] });
    
    1 回复  |  直到 1 月前
        1
  •  1
  •   Hyunwoong Kang    1 月前

    您只返回子字段 quizState state 这是需要的。按如下方式更换减速器:

    export const appReducer = (state = appState, action) => {
      const { type, payload } = action;
    
      switch (type) {
        case SET_QUIZ_STATE:
          return {
            ...state,
            quizState: state.quizState.map(prevState => {
              if(prevState.id !== payload.id) return prevState;
              return {
                ...prevState,
                ...payload
              }
            })
          };
        default:
          return state;
      }
    };
    

    这个答案假设 payload 奎斯泰特 大堆我想你的onChange活动中有一个输入错误 answers answer 为你的有效载荷。