React Input Warning: компонент меняет контролируемый ввод текста типа на неуправляемый

Question

Я практикую REST API, используя один поддельный API сайт. Для внешнего интерфейса я использую React typcript и React router dom для маршрутизации. Я успешно выполнил вход в систему по электронной почте и паролю, используя логин Fake API и перенаправил на список пользователей, где я получил данные из Fake API и показал имя пользователя, изображение. Я использовал кнопку редактирования, после нажатия на кнопку она будет перенаправлена ​​на мои компоненты Обновления, где она заполнит поле ввода, а затем обновлю данные. Мои компоненты обновления работают нормально, как и ожидалось, но в моей консоли я получаю предупреждение, как только набираю свое поле ввода. Вот Ошибка визуализации

Это обновление React компоненты

import React, { useState, useEffect } from "react";
import axios from "axios";

const Update = props => {
  const [state, setState] = useState({
    first_name: "",
    last_name: "",
    email: ""
  });

  const [loading, setLoading] = useState(false);
  useEffect(() => {
    axios
      .get("https://reqres.in/api/users/" + props.match.params.id)
      .then(response => {
        setState({
          first_name: response.data.data.first_name,
          last_name: response.data.data.last_name,
          email: response.data.data.email
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  }, [props.match.params.id]);

  const onChangeFirstName = e => {
    setState({
      first_name: e.target.value
    });
  };

  const onChangeLastName = e => {
    setState({
      last_name: e.target.value
    });
  };
  const onChangeEmail = e => {
    setState({
      email: e.target.value
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    setLoading(true);
    const obj = {
      first_name: state.first_name,
      last_name: state.last_name,
      email: state.email
    };
    axios
      .patch("https://reqres.in/api/users/" + props.match.params.id, obj)
      .then(res => console.log(res.data));
    setLoading(false);
    props.history.push("/users");
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>First Name: </label>
          <input
            type="text"
            className="form-control"
            value={state.first_name}
            onChange={onChangeFirstName}
            id="first_name"
          />
        </div>

        <div className="form-group">
          <label>Last Name: </label>
          <input
            type="text"
            className="form-control"
            value={state.last_name}
            onChange={onChangeLastName}
            id="last_name"
          />
        </div>

        <div className="form-group">
          <label>Email: </label>
          <input
            type="email"
            className="form-control"
            value={state.email}
            onChange={onChangeEmail}
            id="email"
          />
        </div>
        <div className="form-group">
          <button
            className="btn waves-effect blue lighten-1"
            type="submit"
            name="action"
            disabled={loading}
          >
            {loading ? "loading..." : "save"}
          </button>
        </div>
      </form>
    </div>
  );
};

export default Update;

Answer 1

С помощью хуков, когда вы set the state объекта, вам нужно объединить все свойства самостоятельно. Другими словами, если вы обновите свойство объекта с помощью state updater, остальные свойства объектов не будут объединены сами по себе, в отличие от this.setState в компонентах класса.

Измените onChange как это:

const onChangeFirstName = e => {
    const val = e.target.value;
    setState(prevState => ({
      ...prevState,
      first_name: val
    }));
  };

См. рабочая демонстрация

Также быстрое предложение: вместо написания нескольких onChange с, вы можете упростить и просто использовать один.

Как это:

<input
 type="text"
 className="form-control"
 value={state.first_name}
 onChange={onChange}
 id="first_name"
 name="first_name" />

...

const onChange = e => {
    const {name, value} = e.target;
    setState(prevState => ({
      ...prevState,
      [name]: value
    }));
  };