快捷導(dǎo)航

解決React報(bào)錯(cuò)`value` prop on `input` should not be null

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

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

總覽

當(dāng)我們把一個(gè)input的初始值設(shè)置為null或者覆蓋初始值設(shè)置為null時(shí)，會(huì)產(chǎn)生"valueprop on input should not be null"警告。比如說(shuō)，初始值來(lái)自于空的API響應(yīng)?？梢允褂靡粋€(gè)回退值來(lái)解決這個(gè)問(wèn)題。

這里有個(gè)例子來(lái)展示錯(cuò)誤是如何發(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>
  );
}

上述代碼的問(wèn)題在于，我們?yōu)?code>input表單的value屬性設(shè)置為null，這是不被允許的。

你也可能從遠(yuǎn)程API獲取你的input表單的值，并將其設(shè)置為null。

回退值

為了解決該問(wèn)題，我們可以通過(guò)提供回退值，來(lái)確保永遠(yuǎn)不會(huì)為input表單的value屬性設(shè)置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變量的值初始化為一個(gè)空字符串，而不是null。

這樣就可以擺脫警告，除非在你代碼的其他地方將state變量設(shè)置為null。

我們使用邏輯與(||)操作符，如果操作符左側(cè)的為假值(比如說(shuō)null)，則返回其右側(cè)的值。這可以幫助我們確保input表單的value屬性永遠(yuǎn)不會(huì)被設(shè)置為null。

defaultValue

如果你借助refs使用不受控制的input表單，請(qǐng)不要在input元素上設(shè)置value屬性，使用defaultValue來(lái)代替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表單上并沒(méi)有設(shè)置onChange或者value屬性。

你可以使用defaultValue屬性來(lái)為不受控制的input傳遞初始值。然而，這一步驟不是必要的，如果你不想設(shè)置初始值，你可以省略該屬性。

當(dāng)使用不受控制的input表單時(shí)，我們使用ref來(lái)訪(fǎng)問(wèn)input元素。每當(dāng)用戶(hù)點(diǎn)擊例子中的按鈕時(shí)，不受控制的input 的值都會(huì)被記錄下來(lái)。

你不應(yīng)該為不受控制的input設(shè)置value屬性，因?yàn)檫@將使input表單不可變，你將無(wú)法在其中輸入。

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

以上就是解決React報(bào)錯(cuò)`value` prop on `input` should not be null的詳細(xì)內(nèi)容，更多關(guān)于React 報(bào)錯(cuò)解決value input的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: