React中如何阻止变量变更时自动触发submitForm函数执行？

核心问题是submitForm被意外重复执行，而非仅在点击提交按钮时触发。结合你提供的代码，从以下几个关键点修复：

• 正确绑定表单控件的状态更新逻辑
  当前的Checkbox和TextInput缺少onChange事件绑定，要么无法正常更新formVars，要么会通过错误逻辑意外触发状态更新和重渲染。需要给每个表单控件添加对应的状态更新回调：

  const [formVars, setFormVars] = useState<any>({checkbox: true, cookieType: ''})
  
  // Checkbox状态更新
  <Checkbox 
    checked={formVars.checkbox} 
    onChange={(e) => setFormVars(prev => ({...prev, checkbox: e.target.checked}))}
  /> Bake the cookies?
  
  // TextInput状态更新
  <TextInput 
    label="what kind of cookies?" 
    value={formVars.cookieType}
    onChange={(e) => setFormVars(prev => ({...prev, cookieType: e.target.value}))}
  />
  

• 确保submitForm仅在按钮点击时触发
  检查提交按钮的onClick绑定：绝对不要在渲染时直接执行submitForm()（这会导致每次组件渲染都调用函数），而是传递函数引用。你当前的箭头函数写法是正确的，也可以简化为直接传递函数：

  <Button onClick={submitForm}>提交</Button>
  

• 避免副作用钩子的错误触发
  如果组件中使用了useEffect等副作用钩子，检查是否错误地将submitForm或formVars作为依赖项，导致状态更新时重复执行函数。若需优化函数引用，可用useCallback包裹submitForm，确保其仅在formVars变化时重新创建：

  const submitForm = useCallback(() => {
    console.log({formVars})
  }, [formVars])
  

最后确认：代码中不要在组件顶层、渲染逻辑里直接调用submitForm()——这类写法会导致每次组件渲染（包括state更新后的重渲染）都执行该函数，进而引发无限循环。

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