修复 React 中的 value prop on input should not be null 错误

React 1年前 163

当我们将输入的初始值设置为 null 或覆盖将其设置为 null 的初始值时，会导致警告“value prop on input should not be null”，例如来自空的 API 响应。使用后备值来解决这个问题。

下面是一个如何导致警告的示例。

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>
  );
}

上面代码示例中的问题是 – 我们将 input 字段的 value 属性设置为 null，这是不允许的。

我们可能还从远程 API 获取 input 字段的值并将其设置为 null。

为了解决这个问题，我们必须确保永远不要通过提供后备值将 input 上的 value 属性设置为 null。

import {useState} from 'react';

const App = () => {
  // ?️ 将空字符串作为初始值传递
  const [message, setMessage] = useState('');

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

  // ✅ 使用 fallback, 例如
  //  value={message || ''}

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

export default App;

我们将状态变量的值初始化为空字符串而不是 null。

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

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

这有助于我们确保输入字段的 value 属性永远不会设置为 null。

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

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;