（ReactJS）“警告：组件正在将非受控输入更改为受控。这可能是由于值从未定义更改为…”

Question

由另一个控制器控制的用户表单在控制台上抱怨“警告:一个组件正在将一个不受控的输入改变为受控的。这可能是由于值从未定义的值更改为已定义的值而导致的，这是不应该发生的。决定在组件的生命周期内使用受控还是不受控的输入元素。更多信息:https://reactjs.org/link/controlled-components输入跨度li ul ... "

这是组件代码：

export default({user}) => {
  if(!user) {
    return <div></div>
  } else {
    const [name,setName] = useState(user.name|| "")
    useEffect(() => {
      setName(user.name);
    }, [user])
              
    return <form>
             <fieldset> 
               <legend> Edit  {user.name }</legend>
               <p> 
                 <label htmlFor={"name"}> Name  </label>
                 <input  id="name" value={name || ""} onChange={e => setName(e.target.value)} />
               </p> 
             </fieldset>
           </form>
  }
}

我尝试了其他stackoverflow答案中建议的所有修复程序，但仍然给出了警告。
我是否错过了什么？

Answer 1

这个问题主要发生在您有一个未定义的属性值时，现在它可以检查for

解决方案：添加具有默认值的||。

<input checked={state.bestSellerOnly || false} id="best-seller" type="checkbox" value="" className="" />

这里的< code > state . best selor only 可能会在挂载时返回undefined，这可能会导致对react的警告。

Answer 2

我已使用此工作示例更新了您的组件。

const { useEffect, useState } = React;

function Example({ user }) {

  const [name, setName] = useState(user.name);

  function handleChange(e) {
    setName(e.target.value);
  }

  useEffect(() => console.log(name), [name]);

  if(!user) return <div></div>;

  return (
    <form>
      <fieldset> 
        <legend>Edit name</legend>
        <input
          id="name"
          value={name}
          onChange={handleChange}
        />
      </fieldset>
    </form>
  )
};

const user = { name: 'Bob' };

ReactDOM.render(
  <Example user={user} />,
  document.getElementById('react')
);

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 3

实际上，在react中，当你面对这个问题时，这是受控和非受控组件的错误，简单地说：受控组件：是使用状态来改变其值的组件。例子：

<input
onChange={(e)=>{whatever!}
value={from your state}
/>

而在不受控制的组件状态中，不涉及太多，您可以简单地使用默认值或ref。例：

<input
defaultValue={from your state or from anywhere}
/>

请记住：如果您同时使用value和defaultValue，它会给您错误，因为我们不能同时使用受控组件的value和非受控组件的defaultValue。

提示：您需要在受控组件和非受控组件之间进行选择，因此使用ref将是解决方案。或将值更改为默认值将解决它。

注：

defaultValue仅适用于初始加载。如果您想初始化输入，那么您应该使用defaultValue，但如果您想使用state来更改值，那么您需要使用value。阅读本文以了解更多React输入defaultValue不会随状态更新

我在输入中使用了以下方式来摆脱该警告，通过使用短路计算来定义值属性，如下所示：

value={this.state.fields.name || ''}   // (undefined || '') = ''

另一种方法

原因是，在您定义的状态下：

this.state = { fields: {} }

字段作为空白对象，因此在第一次渲染期间 this.state.fields.name 将未定义，输入字段将获得其值：

value={undefined}

因此，输入字段将变得不受控制。

在输入中输入任何值后，状态中的字段将更改为：

this.state = { fields: {name: 'xyz'} }

并且在那时输入场被转换成受控分量；这就是为什么您会得到这个错误:

组件正在将文本类型的非受控输入更改为受控输入。

可能的解决方案：

1-将状态中的字段定义为：

this.state = { fields: {name: ''} }