如何在对象数组上使用 onChange 在 ReactJS 中添加数据

Question

我是 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/>

标签

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

Answer 2

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

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

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

如何在对象数组上使用 onChange 在 ReactJS 中添加数据

how to use onChange on array of objects to add data in ReactJS

javascript

arrays

reactjs

react-hooks

use-state