Question

我正在尝试编写一个使用反应状态来存储联系人信息的联系人管理应用程序。

我有两种状态，一种是数据，另一种是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>
    </>
  );
}

Answer 1

所以您的代码是好的，问题是当您使用constexpr时，您会丢失所有内容。在功能组件中，您需要传播setData，然后更改所需的内容。

您的oldData在setData内部应如下所示：

handleChange

与您的提交表单相比，您根本不需要setData(oldData => ({ ...oldData, [name]: value, }));，因为您只需使用userData对象即可，它具有所需的所有信息。

您可以这样更改data：

handleSubmit

Answer 2

我在此处粘贴了正确的代码，使用散布运算符在调用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>
    </>
  );
}

Answer 3

执行此操作时，您忘记散布-data了：

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

应改为：

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

如何使用输入值更新状态

3 个答案: