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 })}

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

1 个答案: