如何使用 useState 钩子在 React 状态下设置和访问嵌套数组对象的值？

Question

这是我的状态。

const [poll, setPoll] = useState({
    pollQuestion: "Sample question- Is it fine?",
    pollOption: [
      { optionId: 1, optionText: "sample option1", votes: "0" },
      { optionId: 2, optionText: "sample option2", votes: "0" },
      { optionId: 3, optionText: "sample option3", votes: "0" },
      { optionId: 4, optionText: "sample option4", votes: "0" },
    ]
  });

我正在尝试为我的投票设置 optionText。 我目前正在使用它，但这是错误的。

onChange={(e) => setPoll({ ...poll, pollOption.optionText: e.target.value })}

有人可以纠正我吗？

还有如何设置选项文本框的值？

 value={poll.pollOption.optionText}

我试过了，但它同时设置了所有 4 个输入字段的值

Answer 1

你还没有指定错在哪里，但乍一看，PollOption 是一个对象数组，所以你必须指定索引才能访问正确的对象。

要更改索引为i 的对象的OptionText，请尝试：

onChange={(e) => setPoll({ ...poll, PollOption[i].OptionText: e.target.value })}

所以用OptionId: 4改变对象意味着改变数组中的第4个对象，所以i = 3：

onChange={(e) => setPoll({ ...poll, PollOption[3].OptionText: e.target.value })}