React Axios请求完成后State未正确切换加载状态问题排查

• 核心bug：调用setLoading时传入的是字符串'true'/'false'，而非布尔类型值。JavaScript中非空字符串的布尔转换结果永远为true，因此即使执行setLoading('false')，loading变量做条件判断时仍为真，直接导致加载图标常驻、结果组件无法渲染，和你观察到的“赋值了false但UI不同步”现象完全吻合——你实际赋值的是字符串'false'，不是布尔值false。
• 隐藏逻辑缺陷：接口请求的catch异常分支未重置loading状态，一旦请求报错，loading会永久停留在加载状态无法复位。
• 冗余渲染问题：原代码同时写了两套结果渲染逻辑（基于results判断、基于loading判断），会导致接口返回后结果组件被重复渲染。
• 边界判断问题：初始results值为空数组，而JavaScript中空数组属于truthy值，原results ? <Results/> : <h1>No results</h1>的判断逻辑会在未发起搜索时就渲染空的Results组件，不符合预期。

1. 修正loading状态赋值，去掉true/false外层的单引号，传入标准布尔值，同时在异常分支补充loading重置逻辑：

const onFinish = (values) => {
  const Name = values["input-numbersearches"] === undefined ? null : values["input-numbersearches"];
  setLoading(true);

  axios.get(API.facilities.search, {
    headers: {
      "Authorization": `Bearer ${accessToken}`
    },
    withCredentials: true,
    params: { Name }
  })
  .then(res => {
    setResults(res.data);      
    setLoading(false);
  })
  .catch(err => {
    console.log(err);
    // 异常场景也要重置loading，避免卡死
    setLoading(false);
  });
};

2. 删除冗余的重复渲染代码，合并为一套条件渲染逻辑，同时补全空结果判断：

<Button type="primary" htmlType="submit">
  Search
</Button>
{/* 统一按加载状态、结果长度做分支判断 */}
{loading ? (
  <div className='loading'>
    <Spin />
  </div>
) : results.length > 0 ? (
  <Results facilities={results} />
) : (
  <h1>No results</h1>
)}

修复后逻辑：点击搜索按钮时loading设为true展示加载动画，接口无论成功失败都会把loading设为false，加载动画消失后根据返回结果长度判断是展示结果列表还是空状态提示，不会再出现加载动画常驻、结果不显示的问题。

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