React组件非受控转受控输入警告原因及修复方案咨询

警告原因 #

你给minutes状态初始化时没传初始值，React会默认把它设为undefined。这时候绑定了value={minutes}的输入框一开始是不受控组件（因为value为undefined时，和没设置value属性的效果一致）。当你在输入框输入内容后，setMinutes会把状态改成具体数值，输入框就变成了受控组件——组件从不受控突然切换为受控，React就会抛出这个警告，因为React要求一个组件在生命周期内必须保持受控或不受控的状态一致，不能来回切换。

修复方法 #

给useState设置合适的初始值，让输入框从一开始就是受控组件即可。因为你的输入框是type="number"，可以选择两种初始值：

核心修改代码 #

// 方案1：初始值设为空字符串（符合输入框初始为空的交互）
const [minutes, setMinutes] = React.useState('');

// 方案2：初始值设为0（适合默认值为0的场景）
const [minutes, setMinutes] = React.useState(0);

完整修改后的代码 #

<!DOCTYPE html> 
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function App() {
      // 给状态添加初始值
      const [minutes, setMinutes] = React.useState('');
      const onChange = (event) => {
        setMinutes(event.target.value);
      };
      return (
        <div>
          <h1 className="hi">Super Converter</h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={minutes}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
          />
          {/* 避免初始时显示undefined */}
          <h4>You want to convert {minutes || ''}</h4>
          <label htmlFor="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

注：如果选择空字符串作为初始值，建议把<h4>中的{minutes}改成{minutes || ''}，避免页面初始时显示undefined。

内容的提问来源于stack exchange，提问作者신민준