如何更改 React 组件中的状态？答案

【问题标题】：How to change state in a React component?如何更改 React 组件中的状态？
【发布时间】：2023-01-23 05:07:15
【问题描述】：

我正在尝试详细了解 React 并制作一个简单的测验应用程序。我获取了一些本地保存的数据并将其呈现在页面上。但是，当我尝试将数据的状态从 true 更改为 false（切换功能）时，出现错误。一旦它被触发，我就会收到以下错误：无法读取未定义的属性（读取“地图”）。你能告诉我错误在哪里吗？提前致谢。

  const questBlocks = data.map((elem, index) => {
    const ansBlocks = elem.answers.map((ans) => (
      <Answer
        toggle={toggle}
        isSelected={ans.selected}
        ans={ans.text}
        key={ans.id}
        id={ans.id}
      />
    ));
    return (
      <div key={index}>
        <Question question={elem.question} />
        <div className="answerCont">{ansBlocks}</div>
      </div>
    );
  });

  function toggle(id) {
    setData((prevData) => {
      return prevData.map((question) => {
        return question.answers.map((answer) => {
          return answer.id === id
            ? { ...answer, selected: !answer.selected }
            : answer;
        });
      });
    });
  }```

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

question 似乎有一个 answers 属性，并且可能还有其他属性（例如问题文本）。切换答案时，您不应像当前代码那样将问题更改为答案数组 - 问题应保留为具有 answers 属性的对象。

这个

setData((prevData) => {
    return prevData.map((question) => {
        return question.answers.map((answer) => {
            return answer.id === id
                ? { ...answer, selected: !answer.selected }
                : answer;
        });
    });
});

应该

setData((prevData) => (
    data.map((question) => ({
        ...question,
        answers: question.answers.map((answer) => (
            answer.id === id
                ? { ...answer, selected: !answer.selected }
                : answer
        ))
    }))
));

这里也很可能不需要状态设置器的回调。

【讨论】：