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

【问题标题】：Warning: A component is changing a controlled input of type text to be uncontrolled. (React.js)警告：组件正在将文本类型的受控输入更改为不受控制。（反应.js）
【发布时间】：2023-03-05 19:03:02
【问题描述】：

我有以下组件，我在输入中将用户的现有详细信息显示为值，用户应该能够更改这些详细信息并单击保存。但问题是它在控制台中显示以下错误：

  **index.js:1 Warning: A component is changing a controlled input of type text to be uncontrolled.**

这是组件代码：

const Settings = (props) => {
  const { createUser, isAuthenticated, history, errors } = props;
  const dispatch = useDispatch();
  const authUser = useSelector(state => state.auth.user);

  const [user, setUser] = useState({
    data: {
      name: "",
      email: "",
      password: "",
    },
  });

  const [error, setError] = useState({
    nameError: "",
    emailError: "",
    passwordError: "",
  });

  useEffect(() => {
    setUser({
      data: {
        email:authUser.email,
      }
    });    
  }, [authUser]);


  const { name, email, password } = user.data;
  const { nameError, emailError, passwordError } = error;

  const onUpdateUser = (e) => {
    e.preventDefault();

    const isValid = formValidator(user.data, setError);

    if (isValid) {
      dispatch(updateUser(user.data))
    }
  };

  const onChange = (e) => {
    const { name, value } = e.target;
    const { data } = user;
    setUser({
      data: {
        ...data,
        [name]: value,
      },
    });
  };

  return (
    <BForm title="Create an account" handleSubmit={onUpdateUser}>
      {errors ? <p className="error-feedback">{errors}</p> : ""}
      <BInput
        name="name"
        type="text"
        handleChange={onChange}
        value={name}
        placeholder="Your Name"
        error={nameError}
        
      />
      <BInput
        name="email"
        type="email"
        handleChange={onChange}
        value={email}
        placeholder="Email"
        error={emailError}
        required
      />
      <BInput
        name="password"
        type="password"
        value={password}
        handleChange={onChange}
        placeholder="Password"
        error={passwordError}
        required
      />
      <div className="buttons">
        <BButton customClass="login-btn" isfullwidth={true} type="submit">
          {" "}
          Save{" "}
        </BButton>
      </div>
    </BForm>
  );
};

export default Settings;

出了什么问题，如何解决？我需要让我们看到现有的值，然后改变他们想要的任何东西。

【问题讨论】：

这能回答你的问题吗？ A component is changing an uncontrolled input of type text to be controlled error in ReactJS
检查您的useEffect，它将user.data 设置为只有email 属性。例如，如果您随后将文本添加到 password 字段，则 onChange 处理程序将传播仅包含 email 的 user.data，然后 password 由 [name]: value 设置，离开 name undefined = > 受控输入不受控制...？
确实如此。只有三个字段；考虑为每个值使用单独的useState。

标签： javascript reactjs ecmascript-6 react-hooks react-component

【解决方案1】：

useState 不允许像 setState 那样进行修补（即使这样做了，您的数据也嵌套在 data 键中，因此它仍然无法工作）。问题出在这一行：

  useEffect(() => {
    setUser({
      data: {
        email:authUser.email,
      }
    });    
  }, [authUser]);

它需要看起来像这样：

  useEffect(() => {
    setUser(({data}) => ({
     data: {
      ...data,
      email:authUser.email
    }
   }))
  }, [authUser]);

否则，它将删除 name 和 password 键，然后输入将具有 undefined 值（例如，变得不受控制）。

【讨论】：

【解决方案2】：

useEffect 有问题。因为您只更新电子邮件，所以name 和password 将丢失。所以这些输入的初始值会显示这个警告。你可以这样更新：

  useEffect(() => {
    setUser(preState => ({
      data: {
        ...preState.data,
        email:authUser.email,
      }
    }));    
  }, [authUser]);

【讨论】：