Node.js 如何使用react向结构化数组（嵌套）获取输入，数组大小将动态决定

我想从用户那里获取这些格式的输入

"questions":[
        {"question": "Trial question","options":[{"A":"hi","B":"hi","C":"hi","D":"hi"}], "ans":"A","marks":5},
        {"question": "Trial question2","options":[{"A":"hi","B":"hi","C":"hi","D":"hi"}], "ans":"A","marks":1},
        {"question": "Trial question2","options":[{"A":"hi","B":"hi","C":"hi","D":"hi"}], "ans":"A","marks":2}
    ]

这里的数组大小是动态的，用户可以输入这个结构的n个数字。（这里的大小是3）

我正试图以这种方式接受输入

constructor() {
    super();
    this.state = {
      name: "",
      subject: "",
      numQuestion: 0,
      totalNumQuestion: "",
      questions: [
        {
          question: "",
          options: [
            {
              A: "",
              B: "",
              C: "",
              D: "",
            },
          ],
          marks: "",
          ans: "",
        },
      ],
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

在这里，我以下面的方式获取输入

for (let i = 1; i <= this.state.numQuestion; i++) {
      inputs.push(
        <input
          placeholder="Question name"
          name={`question`}
          onChange={this.onChange}
          required
        />,
        <br />,
        <input
          placeholder="Option A"
          name={`A`}
          onChange={this.onChange}
          required
        />,

        <input
          placeholder="Option B"
          name={`B`}
          onChange={this.onChange}
          required
        />,

        <input
          placeholder="Option C"
          name={`C`}
          onChange={this.onChange}
          required
        />,

        <input
          placeholder="Option D"
          name={`D`}
          onChange={this.onChange}
          required
        />,
        <br />,
        <input
          placeholder="Answer"
          name={`ans`}
          onChange={this.onChange}
          required
        />,
        <br />,
        <input
          placeholder="Marks"
          name={`marks`}
          onChange={this.onChange}
          required
        />,
        <br />
      );

---

for（让i=1；i当您的状态变得如此复杂时，最好使用useReducer钩子。
在这里，您可以创建一个存储（您的问题数组），然后编写不同的操作来对您的状态执行不同的操作。
以下是useReducer的链接：

您可以使用上面链接中的示例来满足您的需要。
您首先需要在
componentDidMount
中初始化问题状态。基于问题数，我意识到当前状态下的问题数为零，不确定是从用户输入中获取还是从代码中永久设置

componentDidMount(){
  let quest = [];
  for (let i = 0; i < this.state.numQuestion; i++) {
    quest.push(null)
  }
  this.setState({questions: quest})
}

然后可以渲染元素


for (let i = 1; i <= this.state.numQuestion; i++) {
  inputs.push(
    <input
      placeholder="Question name"
      name={`question`}
      onChange={(e) => this.onChange(i, e.target.name, e.target.value)}
      required
    />,
    <br />,
    <input
      placeholder="Option A"
      name={`A`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,

    <input
      placeholder="Option B"
      name={`B`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,

    <input
      placeholder="Option C"
      name={`C`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,

    <input
      placeholder="Option D"
      name={`D`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,
    <br />,
    <input
      placeholder="Answer"
      name={`ans`}
      onChange={(e) => this.onChange(i, e.target.name, e.target.value)}
      required
    />,
    <br />,
    <input
      placeholder="Marks"
      name={`marks`}
      onChange={(e) => this.onChange(i, e.target.name, e.target.value)}
      required
    />,
    <br />
  );
}


对于（设i=1；i，

，
this.onChangeOption（即，e.target.name，e.target.value）}
必修的
/>,
this.onChangeOption（即，e.target.name，e.target.value）}
必修的
/>,
this.onChangeOption（即，e.target.name，e.target.value）}
必修的
/>,
this.onChangeOption（即，e.target.name，e.target.value）}
必修的
/>,

，
this.onChange（即，e.target.name，e.target.value）}
必修的
/>,

，
this.onChange（即，e.target.name，e.target.value）}
必修的
/>,


);
}
你找到这个问题的解决方案了吗？谢谢你的帮助！！Josh。它工作正常。

for (let i = 1; i <= this.state.numQuestion; i++) {
  inputs.push(
    <input
      placeholder="Question name"
      name={`question`}
      onChange={(e) => this.onChange(i, e.target.name, e.target.value)}
      required
    />,
    <br />,
    <input
      placeholder="Option A"
      name={`A`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,

    <input
      placeholder="Option B"
      name={`B`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,

    <input
      placeholder="Option C"
      name={`C`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,

    <input
      placeholder="Option D"
      name={`D`}
      onChange={(e) => this.onChangeOption(i, e.target.name, e.target.value)}
      required
    />,
    <br />,
    <input
      placeholder="Answer"
      name={`ans`}
      onChange={(e) => this.onChange(i, e.target.name, e.target.value)}
      required
    />,
    <br />,
    <input
      placeholder="Marks"
      name={`marks`}
      onChange={(e) => this.onChange(i, e.target.name, e.target.value)}
      required
    />,
    <br />
  );
}