JIYIK CN >

The warning "value prop on input should not be null" is caused when we set the initial value of an input to null or override the initial value setting it to null, for example from an empty API response. Use a fallback value to solve this problem.

Here is an example of how this can result in a warning.

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

The problem in the above code sample is - we set the value attribute of the input field to null, which is not allowed.

We might also get the value of the input field from a remote API and set it to null.

To fix this, we must ensure that the value property on the input is never set to null by providing a fallback value.

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;

We initialize the value of the state variable to an empty string instead of null.

This will silence the warning unless the state variable is set to null somewhere else in your code.

We have used a logical OR (||)operator that returns the value on the right if the value on the left is false (such as null).

This helps us ensure that the value attribute of the input field is never set to null.

If using uncontrolled input fields with refs, don't set valuethe attribute on the input at all, use 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;

The example above uses an uncontrolled input. Note that the input field has no onChangeattributes or values ​​set.

We can pass an initial value to an uncontrolled input using the defaultValue property. However, this is not required and you can omit the prop if you don’t want to set an initial value.

When using uncontrolled input fields, we access the input using ref.

Each time the user clicks the button in the example, the value of the uncontrolled input is recorded.

We should not set the attribute on uncontrolled inputs ( onChangeinput fields without a handler) valuebecause this will make the input field immutable and we won't be able to type in it.