迹忆客 专注技术分享

当我们将输入的初始值设置为 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;

上面的示例使用不受控制的输入。 请注意，input 字段没有设置 onChange 属性或值。

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

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

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

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