迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2022/04/28 浏览次数:

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

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

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

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 字段不可变并且我们将无法输入它。

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便