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

Posted 2023-02-22

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

【英文标题】：Warning: A component is changing a controlled input of type text to be uncontrolled. (React.js)

【发布时间】：2021-09-12 11:26:35

【问题描述】：

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

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

【参考方案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]);