尝试在 React 的嵌套循环中更改 object 中的值，但我有问题

Question

我有一个反应问题，我有 object 个问题 [{question, correctAnswer, options: [{id, answer, isSelected: false}]}] 我试图在用户选择时将 isSelected 值更改为 true回答 map function 但它只返回一个选项数组而不是整个对象我该怎么做？

这是主要的 object：

这是我的代码：

    function selectAnswers(id) {
        setQestions(prevQuestions => {
          return prevQuestions.map(question => {
            return question.options.map(answer => {
              return answer.id === id
                ? { ...answer, isSelected: !answer.isSelected }
                : answer;
            });
          });
        });
  }

没有 object 的 rest 的结果：

Answer 1

简短的回答，你需要做这样的事情：（我纠正了你的Qestions ）

function selectAnswers(id) {
  setQuestions((prevQuestions) => {
    return prevQuestions.map((question) => {
      let newQuestion = question;

      question.options.forEach((option, index) => {
        if (option.id === id) {
          const newOption = { ...option, isSelected: !option.isSelected };
          const newOptions = question.options.slice();
          newOptions.splice(index, 1, newOption);
          newQuestion = {
            ...newQuestion,
            options: newOptions,
          };
        }
      });

      return newQuestion;
    });
  });
}

长答案：让我们检查一下您的代码

function selectAnswers(id) {
  setQuestions((prevQuestions) => {
    return prevQuestions.map((question) => {
      return question.options.map((answer) => {
        return answer.id === id
          ? { ...answer, isSelected: !answer.isSelected }
          : answer;
      });
    });
  });
}

您的setQuestions回调应该返回一个新的question数组。 它返回一个数组，让我们看看该数组包含什么。

prevQuestions.map((question) => {
  return question.options.map((answer) => {
    return answer.id === id
      ? { ...answer, isSelected: !answer.isSelected }
      : answer;
  });
});

传递给prevQuestions.map的回调不会返回question object。相反，它会返回一组option （或answer ——为了避免混淆，我建议您只命名您的变量option ）。 这就是导致错误的原因。