反应输入警告：组件正在将文本类型的受控输入更改为不受控制答案

【问题标题】：React Input Warning: A component is changing a controlled input of type text to be uncontrolled反应输入警告：组件正在将文本类型的受控输入更改为不受控制
【发布时间】：2020-08-06 06:47:57
【问题描述】：

我正在使用一个 Fake API 站点来练习 REST API。对于前端，我使用 React typescript 和 React router dom 进行路由。我使用Fake API 的登录名成功登录了电子邮件和密码并重定向到列表用户，我从Fake API 获取数据并显示用户名、图像。我使用了编辑按钮，单击该按钮后，它将重定向到我的更新组件，它将填充输入字段，然后我将更新数据。我的更新组件按预期工作，但在我的控制台中，我一输入输入字段就会收到警告。这里是Error visualization

这是 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;

【问题讨论】：

标签： reactjs input warnings

【解决方案1】：

使用钩子，当你set the state一个对象时，你需要自己合并所有属性。换句话说，如果你用state updater更新一个对象的属性，对象的剩余属性不会像类组件中的this.setState那样自行合并。

将您的onChange 修改为这样：

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

见working demo

还有快速建议：您可以简化并只使用一个，而不是编写多个onChanges。

像这样：

<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
    }));
  };

【讨论】：