如何将表单输入传回React useContext 提交时重新拉取天气数据

当前流程断点定位 #

• 表单组件仅单独调用setLatitude更新全局纬度，缺少经度的同步更新逻辑
• 未校验输入值类型，容易因状态值浅相等判定失效，导致useEffect监听不触发
• 表单提交未做原生跳转拦截，容易触发页面刷新重置全局状态

具体实现步骤 #

1. 核对Context对外暴露的方法完整性 #

确认最外层全局包裹的WeatherContext.Provider传递的value，需同时包含两个经纬度状态的更新方法，不存在方法截断：

// index.js中包裹应用的Context Provider示例
<WeatherContext.Provider value={{
  latitude, longitude,
  current, hourly, future,
  setLatitude, setLongitude,
  isLoading, requestError
}}>
  <App />
</WeatherContext.Provider>

2. 补全表单组件的提交逻辑 #

在绑定输入框的表单组件中，同步维护本地输入状态，提交时完成值校验、双字段同步更新，关键逻辑如下：

const { setLatitude, setLongitude } = useGlobalContext()
// 本地状态绑定两个测试用输入框
const [inputLat, setInputLat] = useState('')
const [inputLon, setInputLon] = useState('')

const handleFormSubmit = (e) => {
  // 拦截表单原生提交行为，避免页面刷新
  e.preventDefault()
  // 解析输入值为数字类型，和全局初始硬编码值的类型保持一致
  const parsedLat = Number.parseFloat(inputLat.trim())
  const parsedLon = Number.parseFloat(inputLon.trim())
  // 非法值直接拦截，不触发状态更新
  if (isNaN(parsedLat) || isNaN(parsedLon)) return
  // 同步更新两个全局状态
  setLatitude(parsedLat)
  setLongitude(parsedLon)
}

• 注意：全局初始硬编码的经纬度为数字类型，提交时需将输入值解析为Number类型再传入状态，避免类型不一致导致React浅比较判定失效，跳过状态更新和后续请求触发

3. 优化Context内的请求触发规则 #

确保useEffect能正确监听到经纬度变化并触发请求，逻辑调整点：

• 用useCallback封装fetchWeather时，正确声明经纬度参数依赖，保证参数变化时请求方法同步更新
• useEffect的依赖项绑定封装后的fetch方法，避免不必要的重复请求
• 在请求方法内部增加合法性校验，避免空值触发无效接口调用

// Context内部的请求逻辑
const fetchWeather = useCallback(async () => {
  if (isNaN(latitude) || isNaN(longitude)) return
  setIsLoading(true)
  try {
    const { data } = await axios.get('/server/weather/endpoint', {
      params: { latitude, longitude }
    })
    // 接口返回值结构和硬编码预定义结构完全匹配，直接同步到全局状态即可
    setCurrent(data.current)
    setHourly(data.hourly)
    setFuture(data.future)
  } catch (err) {
    setRequestError(err.message)
  } finally {
    setIsLoading(false)
  }
}, [latitude, longitude])

// 经纬度变化自动触发请求
useEffect(() => {
  fetchWeather()
}, [fetchWeather])

后续组件替换适配说明 #

后续将基础输入框替换为Google Places选择组件时，不需要改动Context层的状态逻辑和请求触发流程：只需要在Google Places的位置选择回调中，拿到对应地点的纬度、经度值，直接调用相同的setLatitude、setLongitude方法即可，原有监听请求的链路会自动触发对应位置的天气拉取。 #

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