使用 React Hooks 更新状态数组

Question

我有一个带有无线电输入的表单。每次用户选择选项时，如果与用户回答的问题相同，我必须更新包含覆盖旧答案的问题答案的数组。所以我有这个useState 在我看来，这将映射答案的旧值，如果问题的答案已经存在，则映射 Object.assign() 它，否则如果它是对新问题的新答案，则只需返回答案。但它只返回默认数组。如果它像 [{}] 一样初始化，则返回 Array[{}]。如果是[]，则返回Array[]

状态是 const [answers, setAnswers] = setState([])

  const handleCheckbox = (e, question) => {
    const newAnswer = { choice: e.target.id, question: question.uuid };

    setAnswers(
      [...answers],
      answers.map(
        answer =>
          answer.question === newAnswer.question ?
          Object.assign(answer, newAnswer): 
          newAnswer
      )
    );
  };

预期：answers: [{id: 1}, {id: 2},...] 无需重复已经存在的内容。

实际：Array[]

Answer 1

不确定您要做什么，您正在使用 2 个参数调用更新程序 setAnswers，而它只需要一个参数。您的预期结果 [answerQuestion1: {}, answerQuestion2:{},...] 不是有效的 JSON 格式，并且您使用了 setState 而不是 useState。

我认为你应该重构你的模型，为什么不使用状态变量answers的对象，它会是这样的：

const [answers, setAnswers] = useState({});

const handleCheckbox = (e, question) => {
  const id = question.uuid;
  const value = e.target.id; // Maybe you could use e.target.value or e.target.name

  setAnswers(prevAnswers => ({
     ...prevAnswers,
     [id]: value
  }));
};