如何在对象数组上使用onChange在ReactJS中添加数据[重复]答案

【问题标题】：how to use onChange on array of objects to add data in ReactJS [duplicate]如何在对象数组上使用onChange在ReactJS中添加数据[重复]
【发布时间】：2021-10-23 09:14:38
【问题描述】：

我是 ReactJS 世界的新手，我想更新包含对象数组的 useState 挂钩，但它现在正在根据我的要求更新数据请帮助我。

ContactForm.js

function ContactForm() {
  const [user, setUser] = useState([]);

  const submitForm = () => {
    console.log(user);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="name"
        onChange={(e) =>
          setUser((state) => [...state, { user_name: e.target.value }])
        }
        value={user.user_name}
      />
      <input
        type="text"
        placeholder="mobile"
        onChange={(e) =>
          setUser([...user, [...user, { mobile_number: e.target.value }]])
        }
        value={user.mobile_number}
      />
      <button onClick={submitForm}>Submit</button>
    </div>
  );
}

我期待类似的东西

[{
    user_name:"abc",
    mobile_number:"123"
}]

应该存储在我的状态，但我得到一些不同的输出，如下所示

0: {user_name: "a"}
1: {user_name: "as"}
2: {user_name: "asd"}
3: (4) [{…}, {…}, {…}, {…}]
4: (5) [{…}, {…}, {…}, Array(4), {…}]
5: (6) [{…}, {…}, {…}, Array(4), Array(5), {…}]

请帮我解决这个问题，并告诉我 useState 中数组中的对象是如何工作的提前致谢

（更新堆栈） 我尝试了很多方法，这就是为什么您可能会感觉到我在代码中编写的内容，尤其是在

<input/>

标签

【问题讨论】：

[...user, [...user, 您正在将以前的值添加为数组，而不是仅仅将以前的值传播到数组本身，您应该像以前一样拥有它
嗨@PatrickEvans，我也尝试了一个[...用户，但我仍然遇到同样的问题
不过，不清楚你为什么在这里使用数组。
嗨@EmileBergeron，我想以数组格式的对象存储数据，这样我就可以在其上应用.map()
您的意思是只有一个用户还是多个用户？如果单身，您的状态应该是一个对象而不是一个数组。如果您想要多个用户，您需要先创建单个用户对象并使用其他方法将其添加到您的数组中

标签： javascript arrays reactjs react-hooks use-state

【解决方案1】：

根据您的代码，我猜user 是一个对象而不是一个数组。您将用户初始化为一个数组，即使它应该是一个对象（假设在这里使用user 单词，即单数）。我做了以下更改：-

将用户初始化为对象。
使用扩展运算符并根据需要添加新属性 user_name 或 mobile_number 以更新状态。

下面的代码应该可以工作

function ContactForm() {
  const [user, setUser] = useState({});

  const submitForm = () => {
    console.log(user);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="name"
        onChange={(e) =>
          setUser({...user, user_name: e.target.value });
        }
        value={user.user_name}
      />
      <input
        type="text"
        placeholder="mobile"
        onChange={(e) =>
          setUser({...user, mobile_number: e.target.value })
        }
        value={user.mobile_number}
      />
      <button onClick={submitForm}>Submit</button>
    </div>
  );
}

【讨论】：

感谢@utkarsh，现在它完全可以工作了
告诉我，当我将对象放入数组时发生了什么？？

【解决方案2】：

我认为您需要更改移动输入上的 setState。现在，当您希望它成为对象时，您正在将用户作为数组传播。当您在父数组中执行 [...user] 时，您将创建一个新数组而不是对象。此外，您需要确保编辑数组的最后一个元素。所以：

setUser([...user, {...user[user.length], mobile_number: e.target.value }])

括号获取该数组的最后一个元素，不确定这是否是您要查找的内容。很确定您需要某种方法来确定在编辑手机号码时要使用数组中的哪个对象。

【讨论】：