警告：组件正在将文本类型的受控输入更改为不受控制。 (React.js)

Question

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

  **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;

出了什么问题，如何解决？ 我需要让查看现有值，然后更改他们想要的任何内容。

Answer 1

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

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

它需要看起来像这样：

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

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

Answer 2

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

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