关于react.js:React报错之value-prop-on-input-should-not-be-null

注释从这开始~

总览

当咱们把一个 input 的初始值设置为 null 或者笼罩初始值设置为 null 时，会产生 ”valueprop 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 = () => {
  // 👇️ 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。

这样就能够解脱正告，除非在你代码的其余中央将 state 变量设置为null。

咱们应用逻辑与 (||) 操作符，如果操作符左侧的为假值 (比如说null)，则返回其右侧的值。这能够帮忙咱们确保input 表单的 value 属性永远不会被设置为null。

defaultValue

如果你借助 refs 应用不受管制的 input 表单，请不要在 input 元素上设置 value 属性，应用 defaultValue 来代替 value 属性。

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。留神input 表单上并没有设置 onChange 或者 value 属性。

你能够应用 defaultValue 属性来为不受管制的 input 传递初始值。然而，这一步骤不是必要的，如果你不想设置初始值，你能够省略该属性。

当应用不受管制的 input 表单时，咱们应用 ref 来拜访 input 元素。每当用户点击例子中的按钮时，不受管制的input 的值都会被记录下来。

你不应该为不受管制的 input 设置 value 属性，因为这将使 input 表单不可变，你将无奈在其中输出。