React天气应用切换单位按钮需双击问题求助

问题描述 #

开发了支持英制/公制单位切换的天气应用按钮，点击按钮会修改API URL参数并重新渲染天气展示组件。目前昼夜天气切换按钮点击即可立即生效，但公制与英制切换按钮从英制切回公制时需双击才能生效。

问题原因 #

你使用了普通变量toggle控制单位切换状态，但React组件每次重新渲染时，这个普通变量会被重置为初始值false，导致状态判断逻辑偏差：

• 第一次点击切换到英制时，toggle变为true，设置英制API URL，组件重新渲染后toggle又被重置为false
• 第二次点击时，toggle再次变为true，此时才触发公制URL的设置，因此需要双击才能生效

解决方案 #

将普通变量toggle替换为React的useState状态变量，让React管理状态的持久化和更新，确保组件重新渲染时状态不会丢失。

修改后的代码 #

状态定义部分 #

const [toggle, setToggle] = useState(false); // 替换原有的let toggle = false

const [displayedWeather, setDisplayedWeather] = useState(null);
const [loading, setLoading] = useState(false);
const [swapUnit, setUnits] = useState(`https://dataservice.accuweather.com/forecasts/v1/daily/5day/${key}?apikey=${apiKey}&details=true&metric=true`);
const [buttonText, setButtonText] = useState('metric');

单位切换函数部分 #

推荐使用函数式更新确保获取最新状态，避免状态滞后：

//Toggle between celsius and fahrenheit
function changeParams(e) {
  e.preventDefault();
  setToggle(prevToggle => {
    if (!prevToggle) {
      setButtonText('Metric');
      setUnits(`https://dataservice.accuweather.com/forecasts/v1/daily/5day/${key}?apikey=${apiKey}&details=true&metric=false`);
    } else {
      setButtonText('Imperial');
      setUnits(`https://dataservice.accuweather.com/forecasts/v1/daily/5day/${key}?apikey=${apiKey}&details=true&metric=true`);
    }
    return !prevToggle;
  });
}

修改后，每次点击按钮都会基于最新状态判断，确保单位切换一次点击即可生效。

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