关于react.js:React报错之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 钩子中为 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 表单，输出就会从不受控变为受控，这是不被容许的。

留神，如果你应用一个不受管制的 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 表单不可变，你将无奈在其中输出。

总览

备用值

useState

defaultValue