React報錯之`value` prop on `input` should not be null

正文從這開始~

總覽

當我們把一個input的初始值設置為null或者覆蓋初始值設置為null時，會產生”valueprop on input should not be null”警告。比如說，初始值來自於空的API響應。可以使用一個回退值來解決這個問題。

value-prop-on-input-should-not-be-null.png

這裡有個例子來展示錯誤是如何發生的。

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表單不可變，你將無法在其中輸入。

VirMach 便宜 VPS

QNews

QNews