React 16.8+jest-enzyme7.0中simulate触发change时受控切换警告问题

这个警告我之前开发时也碰到过，本质原因很清晰：你的myValue初始状态大概率是undefined或者null，导致组件第一次渲染时，input处于非受控状态（React认为没有明确的受控值）；而当你触发change事件更新myValue后，input变成了受控状态，这种状态切换就会触发React的警告。

下面是具体的解决步骤：

1. 给状态设置初始空字符串 #

在你定义myValue的地方（应该是用useState吧？），把初始值设为空字符串''，而不是留空或者设为undefined：

const [myValue, setMyValue] = useState(''); // 这里初始值设为''

2. 确保input的value始终有明确值 #

保持你的input标签写法，只要myValue初始值正确，它就会一直处于受控状态：

<input 
  id="myInput"
  type="text" 
  value={myValue} 
  onChange={(event) => handleChange(event)} 
/>

3. 确认handleChange逻辑正确 #

你的handleChange函数要正确同步输入值到状态，保证每次输入变化都更新myValue：

const handleChange = (event) => {
  setMyValue(event.target.value);
};

这样调整后，组件从一开始就是受控状态，不会出现受控/非受控切换的情况，警告自然就消失了。你的测试代码不需要改动，因为触发change事件的逻辑是正常的，修正组件本身的状态初始化就足够解决问题。

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