React天气应用上线后无法拉取API数据 本地需两次点击提交

1. 本地点击两次提交才返回数据的问题 #

• 核心原因：React的状态更新（setcity1/setcountry1）是异步操作，调用状态更新方法后新状态不会立刻生效，你调用setcity1后立刻用city1拼接请求URL，实际拿到的是更新前的旧值，导致第一次请求参数错误，第二次点击时状态才是上一次更新后的正确值，所以需要点两次才能拿到正确数据。
• 修复方法：不要用刚触发更新的状态拼接URL，直接用你传给setcity1/setcountry1的原始值city和country拼请求地址即可。

2. Netlify部署后完全无法拉取数据的问题 #

• 核心原因有两个：
  1. 你用的是http协议的API地址，Netlify站点默认是https协议，浏览器会拦截https站点发起的http请求（混合内容安全限制），直接阻断了请求流程。
  2. 拼接的URL参数存在语法错误：${city1},$Turkey的写法不对，直接写死国家为Turkey也不符合你存储country1状态的逻辑，另外URL里的&是HTML转义字符，JS代码中直接用&即可。

修正后的代码 #

function updateInput(event) {
    event.preventDefault();
    const API_KEY = "49354479869ae18d7dfbe48bbd9eced7";
    // 直接用原始输入的city、country拼接地址，不依赖未更新的state
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}`)
    .then((res) => { 
      if (res.status >= 200 && res.status < 299) { 
        return res.json() 
      } else { 
        sethata(true)
        throw new Error('接口请求失败')
      }
    })
    .then((data) => {
      setweatherResponse(data)
      // 请求成功后再更新状态、切换展示标识
      setcity1(city);
      setcountry1(country);
      setgoster(true);
      console.log(city, country)
    })
    .catch(err => {
      console.error('请求异常', err)
      sethata(true)
    })
}

• 额外优化：把状态更新和展示标识修改放到请求成功的回调中，避免请求失败时界面已经切换为展示状态但无数据的问题，新增catch捕获网络异常场景。

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