组件正在将不受控制的输入更改为受控

A component is changing an uncontrolled input to be controlled

undefined当输入值初始化为但后来更改为不同的值时，会出现警告“组件正在将不受控制的输入更改为受控” 。

要修复警告，请将输入值初始化为空字符串，例如
value={message || ''}.

组件更改不受控制的输入

下面是错误如何发生的示例。

应用程序.js


import {useState} from 'react';

const App = () => {
  // 👇️ didn't provide an initial value for `message`
  const [message, setMessage] = useState();

  const handleChange = event => {
    setMessage(event.target.value);
  };

  // ⛔️ Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen.

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};

export default App;

问题在于message状态变量最初设置为，undefined
因为我们没有将它的初始值传递给
useState挂钩。

提供回退值，如果`undefined`

解决错误的一种方法是在输入值为时提供回退
undefined。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState();

  const handleChange = event => {
    setMessage(event.target.value);
  };

  // 👇️  value={message || ''}

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message || ''}
      />
    </div>
  );
};

export default App;

我们使用
逻辑 OR (||)
运算符，如果左边的值是假的（例如undefined），它返回右边的值。

如果message变量存储一个undefined值，我们返回一个空字符串作为后备。

将状态变量的初始值传递给`useState`钩子

另一种解决方案是将
状态变量的初始值传递useState给挂钩。

应用程序.js


import {useState} from 'react';

const App = () => {
  // 👇️ pass an initial value to the useState hook
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};

export default App;

将初始值传递给useState挂钩可以消除警告，因为现在message变量不会从undefined有值变为有值。

引起警告的原因是当message变量在没有值的情况下被初始化时，它被设置为undefined.

通过像这样的道具与
根本value={undefined}不通过道具是一样的。value

一旦用户开始输入输入，valueprop 就会被传递到该input字段，并且输入从不受控制变为受控制，这是不允许的。

对非受控组件使用`defaultValue`prop

请注意，如果您使用不受控制的输入字段，则应使用
defaultValueprop 而不是value.

应用程序.js


import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  function handleClick() {
    console.log(inputRef.current.value);
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        id="message"
        name="message"
        defaultValue="Initial value"
      />

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

不受控制的输入默认值

上面的例子使用了一个不受控制的输入。请注意，输入字段没有onChangeprop 或valueset。

您可以使用 prop 将初始值传递给不受控制的输入。但是，这不是必需的，如果您不想设置初始值，可以省略该道具。 defaultValue

当使用不受控制的输入字段时，我们使用ref访问输入
。

每次用户单击示例中的按钮时，不受控制的输入值都会被记录下来。

您不应该value在不受控制的输入（没有onChange处理程序的输入字段）上设置 prop，因为这会使输入字段不可变并且您将无法输入。