如何使用输入值更新状态

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}

          />

}

Answer 1

我在这里粘贴了正确的代码，使用扩展运算符在调用 setData 时提供先前数据的副本，这样它的值就不会被覆盖。const [data, setData] = useState({&nbsp; &nbsp; firstName: "",&nbsp; &nbsp; lastName: "",&nbsp; &nbsp; phoneNumber: "",&nbsp; &nbsp; address: "",&nbsp; &nbsp; imag: "",&nbsp; });&nbsp; // declear a new state varaible to store data&nbsp; const [userData, setUserData] = useState([""]);&nbsp; function handleChange(e) {&nbsp; &nbsp; let name = e.target.name;&nbsp; &nbsp; let value = e.target.value;&nbsp; &nbsp; setData({&nbsp; &nbsp; &nbsp; ...data,&nbsp; &nbsp; &nbsp; [name]: value,&nbsp; &nbsp; });&nbsp; }&nbsp; function handleSubmit(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; setUserData([...userData, data]);&nbsp; }&nbsp; console.log(userData);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <form id="form" className="needs-validation" onSubmit={handleSubmit}>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="imgFile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="First name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={data.firstName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="firstName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="imgFile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Last name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={data.lastName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="lastName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="imgFile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="tel"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Phone Number"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={data.phoneNumber}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="phoneNumber"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="imgFile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={data.email}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="email"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="imgFile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Address"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={data.address}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="address"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="img"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accept="image/*"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={data.img}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="contactButton">Save </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </>&nbsp; );}

Answer 2

所以你的代码很好，问题是当你使用时setData你会失去一切。在功能组件中你需要传播oldData然后改变你喜欢的东西。你setData应该在里面看起来像这样handleChange：setData(oldData => ({&nbsp; &nbsp; ...oldData,&nbsp; &nbsp; [name]: value,}));比在您的提交表单中，您根本不需要userData，因为您可以使用包含data您需要的所有信息的对象。你可以handleSubmit像这样改变你的：function handleSubmit(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; console.log('data',data);&nbsp; &nbsp; // do whatever with your "data", the object has all the information inside}

Answer 3

执行此操作时忘记传播 -data：&nbsp;setData({&nbsp; &nbsp; &nbsp; [name]: value,&nbsp; &nbsp; });应该是这样的：&nbsp;setData({&nbsp; &nbsp; &nbsp; ...data&nbsp; &nbsp; &nbsp; [name]: value,&nbsp; &nbsp; });