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

更新時間：2022年12月05日 09:31:23 作者：chuck

這篇文章主要為大家介紹了React報錯`value` prop on `input` should not be null解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

當我們把一個input的初始值設置為null或者覆蓋初始值設置為null時，會產(chǎn)生"valueprop on input should not be null"警告。比如說，初始值來自于空的API響應?？梢允褂靡粋€回退值來解決這個問題。

這里有個例子來展示錯誤是如何發(fā)生的。

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

上述代碼的問題在于，我們?yōu)?code>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。

我們使用邏輯與(||)操作符，如果操作符左側(cè)的為假值(比如說null)，則返回其右側(cè)的值。這可以幫助我們確保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表單不可變，你將無法在其中輸入。

翻譯原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報錯`value` prop on `input` should not be null的詳細內(nèi)容，更多關于React 報錯解決value input的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: