快捷導(dǎo)航

react component changing uncontrolled input報(bào)錯(cuò)解決

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

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

總覽

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

這里有個(gè)例子來展示錯(cuò)誤是如何發(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，因?yàn)槲覀儧]有在useState鉤子中為其傳遞初始值。

備用值

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

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;

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

如果message變量的值存儲(chǔ)為undefined，我們將空字符串作為備用值進(jìn)行返回。

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鉤子中傳遞初始值可以避免警告，因?yàn)榇藭r(shí)message變量并沒有從undefined變更為一個(gè)值。

引起警告的原因是，當(dāng)message變量在沒有值的情況下被初始化時(shí)，它會(huì)被設(shè)置為undefined。

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

一旦用戶在input中開始輸入，value屬性就會(huì)被傳遞到input表單，輸入就會(huì)從不受控變?yōu)槭芸?，這是不被允許的。

defaultValue

注意，如果你使用一個(gè)不受控制的input表單，你應(yīng)該使用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表單上并沒有設(shè)置onChange或者value屬性。

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

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

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

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

以上就是react component changing uncontrolled input報(bào)錯(cuò)解決的詳細(xì)內(nèi)容，更多關(guān)于react component uncontrolled報(bào)錯(cuò)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: