Как обновить состояние с помощью входных значений - PullRequest
Новая
       50

Как обновить состояние с помощью входных значений

0 голосов
/ 21 июня 2020

Я пытаюсь написать приложение для управления контактами, которое использует состояние реакции для хранения контактной информации.

У меня два состояния: одно - данные, а другое - данные пользователя. Предполагается, что данные будут объектом, который хранит контакт, когда пользователь вводит контактную информацию, в то время как 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>
    </>
  );
}

Ответы [ 3 ]

1 голос
/ 21 июня 2020

Итак, ваш код хорош, проблема в том, что когда вы используете setData, вы теряете все. В функциональных компонентах вам нужно распространить oldData, а затем изменить то, что вам нравится.

Ваш 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
}
0 голосов
/ 21 июня 2020

Я вставил сюда правильный код, используя оператор распространения, копия предыдущих данных предоставляется при вызове 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>
    </>
  );
}
0 голосов
/ 21 июня 2020

Вы забываете распространять -data, когда делаете это: 

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

должно быть следующее: 

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