React中如何让useEffect仅在提交按钮点击时触发，而非输入变更时执行

最优解法：移除不必要的useEffect，直接绑定提交事件 #

你原本的需求是点击提交按钮才触发请求，完全不需要通过useEffect监听状态间接触发，直接把请求逻辑写到提交事件处理函数中即可，逻辑更简洁，也没有多余的状态变量。

修改后的完整代码如下：

function ModelPredict({ model }) {
  const [predictionDate, setPredictionDate] = useState('')
  const [predictionValue, setPredictionValue] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e) => {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault()
    // 可选：增加非空校验
    if (!predictionDate) return
    setIsLoading(true)
    try {
      const res = await fetch(`http://localhost:8000/api/predict/${model.id}/?`
                        + new URLSearchParams({pred_date: predictionDate}))
      const data = await res.json()
      setPredictionValue(data)
    } catch (err) {
      // 可选：增加错误处理逻辑
      console.error('预测请求失败', err)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Select Prediction date: </label>
      <input type="date" name="date" value={predictionDate}
       onChange={e => setPredictionDate(e.target.value)} />
      <input type="submit" value="Submit"/>
      {isLoading && <p>Predicting ...</p>}
      {!isLoading && predictionValue && <p>Prediction: {predictionValue.prediction}</p>}
    </form>
  )
}

该方案的优势 #

• 减少了1个多余的状态变量，降低不必要的组件重渲染开销
• 逻辑链路更直接：用户点击提交 → 触发请求，无需走「修改状态 → useEffect监听状态变化 → 触发请求」的间接链路，可读性和可维护性更高
• 天然支持回车提交表单的默认交互，符合用户使用习惯
• 方便扩展表单校验、错误处理等附加逻辑

特殊场景备选方案（仅当必须使用useEffect时） #

如果你的业务逻辑有特殊要求，确实需要通过useEffect触发请求，可以沿用你原本的inpReady思路，但是需要注意请求完成后要重置该状态，避免下次相同参数提交时无法触发请求：

1. 新增submitted状态，初始为false
2. 点击提交时将submitted设为true
3. useEffect中判断submitted为true时才执行请求，请求完成后立刻将submitted重置为false

该方案相比直接绑定提交事件没有优势，仅作为特殊场景下的兼容实现。

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