react component changing uncontrolled input報錯解決

更新時間：2022年12月02日 17:13:01 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了react component changing uncontrolled input報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

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

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

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表單，輸入就會從不受控變?yōu)槭芸?，這是不被允許的。

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;