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

标签 javascript arrays reactjs react-hooks use-state

<分区>

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

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 单词，即单数)。我做了以下更改:-

将用户初始化为对象。
使用扩展运算符并根据需要添加新属性 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>
  );
}

关于javascript - 如何在对象数组上使用 onChange 在 ReactJS 中添加数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68885504/

上一篇：python - 在 GitHub Actions 中发布缓存 python 依赖项

下一篇：r - 将字符串分成字符

c# - 如何对二维字符串数组进行排序并将其分配给标签

javascript - 使用 redux 和 React-router 进行深度链接的推荐方法

reactjs - Next.js:导航到新路线时更新导航栏组件

Javascript 正则表达式再次捕获

javascript - 在 asp.net 上的文本框中格式化字符串

c# - 如何覆盖 [] 数组中的 ToString()？

java - 从数组中删除重复项并写入文本文件

javascript - 为什么 'if' 条件没有在 ajax 调用的 'then' promise 中得到评估？

javascript - 如何在 https 站点内的 iframe 中允许 http 站点？