React新手求助：受控/非受控email输入切换错误无法解决

嘿，我刚学React的时候也踩过这个一模一样的坑！这个警告的核心问题是你的email输入框在组件的生命周期里，从非受控状态切换成了受控状态，React要求一个输入框在整个生命周期里只能是其中一种状态，咱们一步步来搞定它：

为什么会出现这个警告？ #

当你给input的value属性传undefined（或者完全不设置value）时，React会把这个输入框当成非受控组件；但如果之后这个value变成了一个确定的字符串（比如你从接口拿到了用户邮箱，或者状态更新了），组件就会突然变成受控组件，这种切换就触发了警告。

具体解决方法 #

1. 初始化状态时给email设置空字符串兜底 #

如果你的邮箱状态是在组件内部维护的，别让初始状态是undefined，直接设为空字符串：

// 错误写法：初始状态是undefined
const [email, setEmail] = useState();

// 正确写法：初始化为空字符串
const [email, setEmail] = useState('');

2. 从props获取值时，确保不会传入undefined #

如果邮箱值是从父组件传过来的props，记得用空字符串兜底，避免undefined：

const Edit = ({ userEmail }) => {
  // 用||兜底，确保初始状态不会是undefined
  const [email, setEmail] = useState(userEmail || '');

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
};

3. 别在value里写条件渲染导致undefined #

避免类似下面的写法，这种会让value在某个阶段变成undefined：

// 错误写法：isLoaded为false时value是undefined
<input
  type="email"
  value={isLoaded ? email : undefined}
  onChange={(e) => setEmail(e.target.value)}
/>

// 正确写法：始终给value一个确定的值
<input
  type="email"
  value={isLoaded ? email : ''}
  onChange={(e) => setEmail(e.target.value)}
/>

4. 如果想用非受控组件，就用defaultValue而非value #

如果你本来就想让输入框是非受控的（比如不需要实时同步状态），那就别用value，改用defaultValue，这样就不会有切换的问题：

<input
  type="email"
  defaultValue={initialEmail || ''}
  // 可以用ref来获取输入值，而不是onChange同步状态
  ref={emailRef}
/>

按照上面的方法调整后，这个警告应该就消失啦！

内容的提问来源于stack exchange，提问作者Khurram Shahzad