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

Question

我有一个复选框组件，当为复选框选择一个值时，我想用真值和假值更新我的状态。我总共有 5 个不同的 states.I 无法从我的状态更新单个对象。有人可以帮忙吗？

在我设置值后，当前实现的 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] });

Answer 1

您只返回需要整个 state 的子字段 quizState。像下面这样更改你的减速器：

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 对象兼容成为 quizState 数组中的一个元素。我认为您在 onChange 事件中输入了 answers，而不是 answer 作为有效负载。

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

How to update a single object inside the array with useReduce on state change

javascript

reactjs

react-hooks

use-reducer