使用 React Hooks 更新 state arrays

Question

我有一個帶有無線電輸入的表格。 每次用戶選擇選項時，如果用戶回答的問題與用戶回答的問題相同，我必須更新包含覆蓋舊答案的問題答案的數組。 所以我有這個useState ，在我看來，map 是答案的舊值，如果問題的答案已經存在，map 和Object.assign()只需返回答案。 但它只返回默認數組。 如果它像 [{}] 一樣初始化，則返回Array[{}] 。 如果是[]，則返回Array[]

State 是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 個 arguments 調用更新程序setAnswers而它只需要一個。 您的預期結果[answerQuestion1: {}, answerQuestion2:{},...]不是有效的 JSON 格式，並且您使用了setState而不是useState 。

我認為你應該重組你的 model，為什么不使用 object 作為 state 變量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
  }));
};

Answer 2

1. React State Hook 是useState ，而不是setState 。

2. 即使你有一個合適的鈎子， setAnswers也沒有這樣的第二個參數。

試試下面的代碼：

const handleCheckbox = (e, question) => {
  const newAnswer = {
    choice: e.target.id,
    question: question.uuid
  };
  const newAnswers = answers.map(
    answer =>
    answer.question === newAnswer.question ?
    newAnswer :
    answer
  )

  setAnswers(newAnswers);
);