使用反应钩子实现先前的问题逻辑

Question

我正在制作一个非常简单的反应测验应用程序，您可以在其中通过“下一步”按钮从一个问题到另一个问题。每次单击下一个按钮时，一个 useState 钩子（作为道具传递给 onAnswerUpdate）将带有问题标题和所选答案的对象推送到名为“答案”的数组：

const nextClickHandler = (e) => {
    if(selected === '') {
      return setError('Please select one option');
    }
    onAnswerUpdate(prevState => [...prevState, { q: data.question, a: selected }]);
    setSelected('');
    if(activeQuestion < numberOfQuestions - 1) {
      onSetActiveQuestion(activeQuestion + 1);
    }else ...
  }

我实现了一个基本的上一个按钮逻辑，其唯一功能是返回上一个问题，但是当我将答案更改为已回答的问题时，我很难找到一种方法来替换答案数组中对应于正确问题的对象.我尝试使用 activeQuestion 编号作为数组的索引（如下面的代码示例）和 splice 方法替换它，但它们都不起作用。任何帮助将不胜感激。

const nextClickHandler = (e) => {
      if(selected === '') {
        return setError('Please select one option');
      }
      onAnswerUpdate(prevState => [...prevState, answers[activeQuestion] = { q: data.question, a: selected }]);
      setSelected('');
      if(activeQuestion < numberOfQuestions - 1) {
        onSetActiveQuestion(activeQuestion + 1);
      } else ...

Answer 1

与prevState 挂钩，数组总是让我发疯……我更喜欢使用更简单的方法。如果您需要替换处于状态的数组中的元素，您可以这样写：

...
let currAnswer = answer;
currAnswer[activeQuestion] = { q: data.question, a: selected };
onAnswerUpdate(currAnswer);
...