Javascript 如何使用输入值更新状态

我正在尝试编写一个联系人管理应用程序，它使用react state来存储联系人信息

我有两个状态，一个是data，另一个是userData。 数据应该是在用户输入联系人信息时存储联系人的对象，而userData是所有数据对象的数组

但由于某些原因，我只从对象中获得一个属性，它始终是最后输入的字段。我不知道我做错了什么。请帮忙。我的代码：

const [data, setData] = useState({
    firstName: "",
    lastName: "",
    phoneNumber: "",
    address: "",
    imag: "",
  });
  // declear a new state varaible to store data

  const [userData, setUserData] = useState([""]);

  function handleChange(e) {
    let name = e.target.name;
    let value = e.target.value;

    setData({
      [name]: value,
    });
  }
  function handleSubmit(e) {
    e.preventDefault();
    setUserData([...userData, data]);
  }
  /*le.log(userData);
  }, [userData]);*/

  console.log(userData);

  return (
    <>
      <form id="form" className="needs-validation" onSubmit={handleSubmit}>
        <div>
          <input
            className="imgFile"
            type="text"
            placeholder="First name"
            value={data.firstName}
            name="firstName"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="text"
            placeholder="Last name"
            value={data.lastName}
            name="lastName"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="tel"
            placeholder="Phone Number"
            value={data.phoneNumber}
            name="phoneNumber"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="email"
            placeholder="Email"
            value={data.email}
            name="email"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="text"
            placeholder="Address"
            value={data.address}
            name="address"
            onChange={handleChange}
          />
          <input
            type="file"
            name="img"
            accept="image/*"
            value={data.img}
            onChange={handleChange}
          />
          <button className="contactButton">Save </button>
        </div>
      </form>
    </>
  );
}

const[data，setData]=useState({
名字：“，
姓氏：“，
电话号码：“，
地址：“，
imag:“”，
});
//清除一个新的状态变量以存储数据
const[userData，setUserData]=useState（[“”]）；
功能手柄更改（e）{
让name=e.target.name；
设值=e.target.value；
设置数据({
[名称]：值，
});
}
函数handleSubmit（e）{
e、 预防默认值（）；
setUserData（[…userData，data]）；
}
/*le.log（用户数据）；
}，[userData]）*/
console.log（userData）；
返回(
拯救
);
}

执行此操作时，您忘记了传播数据：

 setData({
      [name]: value,
    });

应该是这样的：

 setData({
      ...data
      [name]: value,
    });

---

这样做时，您忘记了传播数据：

 setData({
      [name]: value,
    });

应该是这样的：

 setData({
      ...data
      [name]: value,
    });

---

因此，您的代码是好的，问题是当您使用

setData

时，您会丢失一切。在功能组件中，您需要传播

旧数据

，然后根据需要进行更改

您的

setData

在

handleChange

中应该是这样的：

setData(oldData => ({
    ...oldData,
    [name]: value,
}));

与提交表单相比，您根本不需要

userData

，因为您可以使用

data

对象，该对象包含您需要的所有信息

您可以这样更改

handleSubmit

：

function handleSubmit(e) {
    e.preventDefault();
    console.log('data',data);
    // do whatever with your "data", the object has all the information inside
}

---

因此，您的代码是好的，问题是当您使用

setData

时，您会丢失一切。在功能组件中，您需要传播

旧数据

，然后根据需要进行更改

您的

setData

在

handleChange

中应该是这样的：

setData(oldData => ({
    ...oldData,
    [name]: value,
}));

与提交表单相比，您根本不需要

userData

，因为您可以使用

data

对象，该对象包含您需要的所有信息

您可以这样更改

handleSubmit

：

function handleSubmit(e) {
    e.preventDefault();
    console.log('data',data);
    // do whatever with your "data", the object has all the information inside
}

---

我在这里粘贴了正确的代码，使用spread运算符，调用setData时会提供以前数据的副本，这样就不会覆盖它的值

const [data, setData] = useState({
    firstName: "",
    lastName: "",
    phoneNumber: "",
    address: "",
    imag: "",
  });
  // declear a new state varaible to store data

  const [userData, setUserData] = useState([""]);

  function handleChange(e) {
    let name = e.target.name;
    let value = e.target.value;
    setData({
      ...data,
      [name]: value,
    });
  }

  function handleSubmit(e) {
    e.preventDefault();
    setUserData([...userData, data]);
  }


  console.log(userData);

  return (
    <>
      <form id="form" className="needs-validation" onSubmit={handleSubmit}>
        <div>
          <input
            className="imgFile"
            type="text"
            placeholder="First name"
            value={data.firstName}
            name="firstName"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="text"
            placeholder="Last name"
            value={data.lastName}
            name="lastName"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="tel"
            placeholder="Phone Number"
            value={data.phoneNumber}
            name="phoneNumber"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="email"
            placeholder="Email"
            value={data.email}
            name="email"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="text"
            placeholder="Address"
            value={data.address}
            name="address"
            onChange={handleChange}
          />
          <input
            type="file"
            name="img"
            accept="image/*"
            value={data.img}
            onChange={handleChange}
          />
          <button className="contactButton">Save </button>
        </div>
      </form>
    </>
  );
}

const[data，setData]=useState({
名字：“，
姓氏：“，
电话号码：“，
地址：“，
imag:“”，
});
//清除一个新的状态变量以存储数据
const[userData，setUserData]=useState（[“”]）；
功能手柄更改（e）{
让name=e.target.name；
设值=e.target.value；
设置数据({
…数据，
[名称]：值，
});
}
函数handleSubmit（e）{
e、 预防默认值（）；
setUserData（[…userData，data]）；
}
console.log（userData）；
返回(
拯救
);
}

我在这里粘贴了正确的代码，使用扩展运算符调用setData时会提供以前数据的副本，这样就不会覆盖它的值

const [data, setData] = useState({
    firstName: "",
    lastName: "",
    phoneNumber: "",
    address: "",
    imag: "",
  });
  // declear a new state varaible to store data

  const [userData, setUserData] = useState([""]);

  function handleChange(e) {
    let name = e.target.name;
    let value = e.target.value;
    setData({
      ...data,
      [name]: value,
    });
  }

  function handleSubmit(e) {
    e.preventDefault();
    setUserData([...userData, data]);
  }


  console.log(userData);

  return (
    <>
      <form id="form" className="needs-validation" onSubmit={handleSubmit}>
        <div>
          <input
            className="imgFile"
            type="text"
            placeholder="First name"
            value={data.firstName}
            name="firstName"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="text"
            placeholder="Last name"
            value={data.lastName}
            name="lastName"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="tel"
            placeholder="Phone Number"
            value={data.phoneNumber}
            name="phoneNumber"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="email"
            placeholder="Email"
            value={data.email}
            name="email"
            onChange={handleChange}
          />
          <input
            className="imgFile"
            type="text"
            placeholder="Address"
            value={data.address}
            name="address"
            onChange={handleChange}
          />
          <input
            type="file"
            name="img"
            accept="image/*"
            value={data.img}
            onChange={handleChange}
          />
          <button className="contactButton">Save </button>
        </div>
      </form>
    </>
  );
}

const[data，setData]=useState({
名字：“，
姓氏：“，
电话号码：“，
地址：“，
imag:“”，
});
//清除一个新的状态变量以存储数据
const[userData，setUserData]=useState（[“”]）；
功能手柄更改（e）{
让name=e.target.name；
设值=e.target.value；
设置数据({
…数据，
[名称]：值，
});
}
函数handleSubmit（e）{
e、 预防默认值（）；
setUserData（[…userData，data]）；
}
console.log（userData）；
返回(
拯救
);
}

谢谢大家的帮助。@wealthmiq欢迎，如果你觉得他们有帮助，请投票回答。谢谢大家的帮助。@wealthmiq欢迎，如果你觉得他们有帮助，请投票回答。