react?component?changing?uncontrolled?input報錯如何解決

這篇文章主要介紹“react component changing uncontrolled input報錯如何解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“react component changing uncontrolled input報錯如何解決”文章能幫助大家解決問題。

總覽

當input的值被初始化為undefined，但后來又變更為一個不同的值時，會產生"A component is changing an uncontrolled input to be controlled"警告。為了解決該問題，將input的值初始化為空字符串。比如說，value={message || ''} 。

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

import {useState} from 'react';
const App = () => {
  // ????? didn't provide an initial value for message
  const [message, setMessage] = useState();
  const handleChange = event => {
    setMessage(event.target.value);
  };
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};
export default App;

上面代碼的問題在于，message變量被初始化為undefined，因為我們沒有在useState鉤子中為其傳遞初始值。

備用值

解決該錯誤的一種方式是，如果input的值為undefined，那么就提供一個備用值。

import {useState} from 'react';
const App = () => {
  const [message, setMessage] = useState();
  const handleChange = event => {
    setMessage(event.target.value);
  };
  // ?????  value={message || ''}
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message || ''}
      />
    </div>
  );
};
export default App;

我們使用邏輯與(||)操作符，如果操作符左側的為假值(比如說undefined)，則返回其右側的值。

如果message變量的值存儲為undefined，我們將空字符串作為備用值進行返回。

useState

另一種解決方案是，在useState鉤子中為state變量傳遞初始值。

import {useState} from 'react';
const App = () => {
  // ????? pass an initial value to the useState hook
  const [message, setMessage] = useState('');
  const handleChange = event => {
    setMessage(event.target.value);
  };
  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};
export default App;

在useState鉤子中傳遞初始值可以避免警告，因為此時message變量并沒有從undefined變更為一個值。

引起警告的原因是，當message變量在沒有值的情況下被初始化時，它會被設置為undefined。

傳遞一個像value={undefined}這樣的屬性，就等于根本沒有傳遞value屬性。

一旦用戶在input中開始輸入，value屬性就會被傳遞到input表單，輸入就會從不受控變為受控，這是不被允許的。

defaultValue

注意，如果你使用一個不受控制的input表單，你應該使用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表單不可變，你將無法在其中輸入。

關于“react component changing uncontrolled input報錯如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。