Arrays 更改singleinput代码以在react中动态添加更多具有相同功能的输入字段

设置了一个输入字段，它附带了许多进程

这些输入字段用于“添加成员”

如何使此代码正常工作，以便将传统字段添加到react项目中

这是我遇到问题的代码

我的困难在于理解map函数，为动态添加的独立输入字段创建不同的值集（这样它们就不会更改相同的输入字段），以及使代码适应有1个输入字段时的工作情况。 那么

地图（项目、索引）

对不同值作出反应的输入字段

使用的旧代码

     if (inviteSent && fields.email.value) {
          setInviteSent(false);
          console.log(inviteSent);

但不适用于

     if (inviteSent && fields[holder.length - 1].email.value) {
          setInviteSent(false);
          console.log(inviteSent);

---

import React，{useffect，useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
设克隆字段={
电邮：“，
姓名：“，
};
let holder=[CloneFields]；
常量[字段，设置字段]=使用状态（持有者）；
const emailChange=（e，索引）=>{
持有者[索引]。项目=e.target.value；
设置字段（持有者）；
};
让FormInput=[“”]；
const[inviteSent，setInviteSent]=useState（false）；
useffect（（）=>{
if（inviteSent&&fields[holder.length-1].email.value）{
设置已发送（假）；
控制台日志（已发送）；
}
}，[inviteSent，字段[holder.length-1].email.value]）；
const addother=（）=>{
持有者=[持有者+克隆字段]；
设置字段（持有者）；
};
返回(
你好，代码沙盒
{fields.map（（项，索引）=>(
))}
再加一个+
开始编辑，看看神奇的发生！
);
}

沙箱：

---

任何建议都是非常有用的，因为我似乎无法理解本文中使用的map函数。

不幸的是，您的代码没有什么意义，我不得不修改很多东西，但最终可能您正在寻找类似的东西？由于从未调用过

setInviteSent

，因此我省略了“invite sent”位

const fieldsTemplate={
电邮：“，
姓名：“
};
函数App（）{
const[data，setData]=React.useState（（）=>[{…fieldsTemplate}]）；
常量updateField=（e，字段，索引）=>{
const newData=[…data]；
newData[index]={…newData[index]，[field]：e.target.value}；
setData（newData）；
};
const addother=（）=>{
const newData=[…data，{…fieldsTemplate}]；
setData（newData）；
};
返回(
你好，代码沙盒
{data.map（（项目，索引）=>(
updateField（e，“名称”，索引）}
/>
updateField（e，“电子邮件”，索引）}
/>
))}
再加一个
);
}
ReactDOM.render（，document.getElementById（“app”）
感谢您的大力帮助，对于代码的草率/重新编写，我深表歉意。你给了我完成项目所需的一切：）
import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  let CloneFields = {
    email: "",
    name: "",
  };

  let holder = [CloneFields];

  const [fields, setFields] = useState(holder);

  const emailChange = (e, index) => {
    holder[index].item = e.target.value;
    setFields(holder);
  };
  let FormInput = [""];

  const [inviteSent, setInviteSent] = useState(false);

  useEffect(() => {
    if (inviteSent && fields[holder.length - 1].email.value) {
      setInviteSent(false);
      console.log(inviteSent);
    }
  }, [inviteSent, fields[holder.length - 1].email.value]);
  const addAnother = () => {
    holder = [holder + CloneFields];
    setFields(holder);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {fields.map((item, index) => (
        <input
          type="name"
          placeholder="Name"
          value={fields[index].item.value}
          onChange={emailChange}
        ></input>
      ))}
      <div onClick={addAnother}>add another +</div>

      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}