已解决：在 React 中，`input` 上的 `value` 属性不应为 null

作者

已解决：在 React 中valueprop oninput不应该为 null

Solved: `value` prop on `input` should not be null in React

警告“ valueprop on inputshould not be null”是在我们将输入的初始值设置为null或覆盖初始值设置为 时引起的null，例如来自空的 API 响应。

使用回退值来解决这个问题。

输入的 value 属性不应为 null

这是警告如何引起的示例。

应用程序.js
export default function App() {
  // ⛔️ Warning: `value` prop on `input` should not be null.
  // Consider using an empty string to clear the component or `undefined` for uncontrolled components.

  return (
    <div>
      <input value={null} />
    </div>
  );
}

问题是我们正在设置
不允许的字段value的道具。inputnull

您可能还从远程 API 获取输入字段的值并将其设置为null.

提供回退值来解决错误

为了解决这个问题，我们必须确保永远不会通过
提供后备值value来将道具设置到
inputto上。null

应用程序.js
import {useState} from 'react';

const App = () => {
  // 👇️ pass empty string as initial value
  const [message, setMessage] = useState('');

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

  // ✅ use fallback, e.g.
  //  value={message || ''}

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

export default App;
我们将 state 变量的值初始化为空字符串而不是. null

这消除了警告，除非您将状态变量设置为null
代码中的其他位置。

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

这有助于我们确保value该字段的属性input永远不会被设置为null.

defaultValue对非受控组件使用prop

value如果您使用带有 refs 的不受控制的输入字段，则根本不要在输入上设置prop，defaultValue而是使用。

应用程序.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，因为这会使输入字段不可变并且您将无法输入。

我还写了一篇关于
如何使用 ref 设置输入字段值的文章。