React集成ReactSearchAutocomplete后如何实现点击按钮才请求天气数据

• 选中下拉选项自动触发请求的原因：代码中存在监听city状态的useEffect，选中选项时handleOnSelect会执行setCity更新city状态，触发useEffect回调自动调用fetchCityData发起请求，和onSelect是否直接绑定请求方法无关。
• city=[object Object]400错误的原因：按钮的onClick直接绑定了fetchCityData，点击事件触发时会默认将事件对象作为参数传入方法，你直接把这个对象拼接到URL参数中，序列化后就变成了[object Object]，导致参数格式错误。

要实现仅点击按钮才发起天气查询请求，按以下步骤修改代码即可：

1. 移除监听city的useEffect，避免状态更新自动触发请求
2. 修改fetchCityData方法，不再接收外部参数，直接读取city状态值作为请求参数
3. 修正finally的错误写法（原写法会在组件初始化时直接执行setLoading(false)，需要包裹为函数）

修改后的核心代码片段如下：

// 删掉原来监听city的useEffect
// useEffect(() => {
//   city && fetchCityData(city);
// }, [city])

const fetchCityData = () => {
  // 未选中城市时不发起请求
  if (!city) return
  // 发起请求前开启加载状态
  setLoading(true)
  const options = {
    method: `POST`,
  };
  fetch(`/api/weather?city=${city}`, options)
  .then((response) => {
    if(response.ok){
      return response.json().then(setPayload)
    }
    throw new Error('Api is not available') 
  })
  .catch(error => {
    console.error('Error fetching data: ', error)
    setError(error)
  })
  .finally(() => setLoading(false))
}

按钮的onClick绑定不需要额外调整，修改后只有点击按钮才会发起请求，也不会再出现参数为对象的错误。

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