React+TypeScript天气应用点击按钮切换状态时UI闪烁问题求助

问题根源 #

你当前的实现是根据isloading状态卸载旧按钮、挂载新按钮，React在处理这种组件替换时，会操作DOM节点的移除和添加，这就是导致屏幕闪烁的核心原因。

修复方案 #

不要切换两个独立的按钮组件，而是复用同一个按钮，根据isloading状态动态修改按钮的文本和点击事件。这样DOM节点不会被卸载重建，自然就不会出现闪烁。

修改后的代码示例 #

1. 替换原来的两个按钮渲染代码为：

<button
  className="rounded-full bg-sky-500/75 hover:bg-sky-500/100 px-5 py-3 my-5"
  onClick={isloading ? isLoadingHandler : forecastHandler}
>
  {isloading ? "Close The Forecast" : "See Next 7 Days Forecast"}
</button>

2. 保持原有的isLoadingHandler逻辑不变：

const isLoadingHandler = () => {
  setIsLoading(false);
  setIcon("");
  setCond("");
  setNext([]);
};

额外优化建议 #

• 把next的类型从any[]改成明确的类型，符合TypeScript的类型安全要求，比如定义一个接口：

interface ForecastItem {
  // 根据API返回的数据结构定义字段，示例：
  date: string;
  temp: string;
  icon: string;
  condition: string;
}

const [next, setNext] = useState<ForecastItem[]>([]);

这样能避免类型错误，提升代码可维护性。

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