日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

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

作者:chuck ? 更新時間: 2022-12-31 編程語言

總覽

當我們把一個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表單不可變,你將無法在其中輸入。

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

原文鏈接:https://juejin.cn/post/7128773403749646350

欄目分類
最近更新