如何在反应中对嵌套对象使用扩展运算符？

Question

我是 React 的新手，一直坚持在 reducer 中构建对象扩展代码。状态被存储为

{
  user: name,
  userAuth: null,
  errors: error,
  quizScores: [
    {
      quizId: 1,
      questionId: 12345,
      selectedOption: optionTwo,
      result: true,
    },
    {
      quizId: 2,
      questionId: 12345,
      selectedOption: optionTwo,
      result: true,
    }
  ]
}

在调度时，我想更新状态以将对象（如下）附加到位于“quizScores”中的其他对象

{
  quizId: 2,
  questionId: 12345,
  selectedOption: optionTwo,
  result: true,
}

我正在尝试的是：

case ADD_SCORE:
    return {
      ...state,
      quizScores:{...state[quizScores],action.payload}
    };

很高兴了解如何使用扩展运算符复制以前的对象以及如何将新对象附加到其中。如果您认为，我可以使用更好的结构来存储数据，我也将不胜感激。我的目标是简单地继续添加所有问题性能以存储在状态中。 谢谢！！

我正在使用 useState 钩子在功能组件中创建 quizScores 数据并触发以下函数调用 (handleQuizScore)：

  const handleQuizScore = (questionData) => {
    dispatch({
      type: ADD_SCORE,
      payload: questionData,
    });
  };

这是处理状态的整个reducer函数：

const authReducer = (state, action) => {
  switch (action.type) {
    case SUCCESS_REGISTER:
    case FAIL_REGISTER:
      return {
        ...state,
        userAuth: null,
        errors: action.payload,
      };
    case SUCCESS_LOGIN:
      localStorage.removeItem("token");
      localStorage.setItem("token", action.payload.token);
      console.log(action.payload.token);
      return {
        ...state,
        userAuth: true,
        errors: null,
      };
    case FAIL_LOGIN:
      return {
        ...state,
        userAuth: null,
        errors: action.payload,
      };
    case SET_ERROR:
      return {
        ...state,
        errors: action.payload,
      };
    case CLEAR_ERROR:
      return {
        ...state,
        errors: null,
      };
    case SET_USER:
      return {
        ...state,
        user: action.payload,
        userAuth: true,
        errors: null,
      };
    case AUTH_ERROR:
      return {
        ...state,
        errors: action.payload,
        userAuth: null,
      };
    case LOG_OUT:
      localStorage.removeItem("token");
      return {
        ...state,
        userAuth: null,
        errors: action.payload,
      };
    case ADD_SCORE:
      return {
        ...state,
        quizScores: [...state.quizScores, action.payload],
      };
    default:
      return state;
  }
};

使用useState的功能组件：

const QuizQuestion = (props) => {
  const { clearError, userAuth, user, handleQuizScore } = useContext(
    AuthContext
  );
  let [questionData, handleQuizQuestion] = useState({
    selectedOption: "",
    result: "",
    quiz: "",
    questionId: "",
  });

  let { selectedOption, result, quiz, questionId } = questionData;
  const { question, toggleIsAnswered, quizId } = props;

  const handleOptionChange = (e) => {
    const { value } = e.target;
    console.log(question.answer);
    handleQuizQuestion({
      ...questionData,
      quiz: quizId,
      questionId: question._id,
      selectedOption: value,
    });
  };

  const resultCheck = (questionData) => {
    let flag = selectedOption === question.answer ? "true" : "false";
    handleQuizQuestion({
      ...questionData,
      result: flag,
    });
  };
  const handleVote = async (e) => {
    e.preventDefault();
    resultCheck(questionData);
    console.log("handleQuizQuestion", questionData);
    await handleQuizScore(questionData);
    toggleIsAnswered();
  };

返回（等等）

Answer 1

state[quizScores] 表示获取变量quizScores，对其求值，并将该值用作对象state 的键。 quizScores 可能未定义。使用字符串文字作为键 state["quizScores"] 或更常见且更可取的点表示法 state.quizScores 来访问和传播该数组值。

case ADD_SCORE: 
  return {
    ...state,
    quizScores: [...state.quizScores, action.payload],
  };