Axios 请求后反应状态没有改变

Question

我目前正在尝试使用对我的后端的 API 请求来构建搜索。 到目前为止，这是有效的，但我的加载图标状态在结果显示后并没有完全恢复到“假”状态。 我也没有收到任何错误。 我记录了状态，它表明在结果显示后为加载设置了 false，但我在第 81-91 行的代码似乎没有相应地更新我的加载元素。

import { useContext ,useState } from 'react';
import { AuthContext } from "../contexts/AuthContext"
import {
  Button,
  Form,
  Input,
  Spin
} from 'antd';
import axios from 'axios';
import Results from '../containers/Results';
import { API } from "../api"
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const Searches = () => {

  const [loading, setLoading] = useState(false)
  const [results, setResults] = useState([])


  const { accessToken } = useContext(AuthContext);

  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);
    });
  };


  return (
    <div>
      <h1 className="">Claim Facilities</h1>
      <p></p>
      <Form
        name="validate_other"
        {...formItemLayout}
        onFinish={onFinish}
        initialValues={{
        }}
      >



          <Form.Item name="input-numbersearches" noStyle>
            <Input
              name="searchfields"
              placeholder="enter facility name"
              // onSubmit={value => console.log(value)}
              style={{ width: 200 }}
            />          
  
          </Form.Item>
          <Button type="primary" htmlType="submit">
            Search
            </Button>
        {results ? ( 
          <Results facilities={results} />
        ) : (
          <h1>No results</h1>
        )}
        {loading ? ( <div className='loading'>
          <Spin />
        </div>
        ) : (
          <Results facilities={results} />
        )}
        <Form.Item
          wrapperCol={{
            span: 12,
            offset: 6,
          }}
        >
        </Form.Item>
      </Form>
    </div>
    
  );
};

export default Searches;

我最初以这种方式尝试过，这对我来说更有意义，但结果现在显示了结果，但我却无休止地得到了加载图标：

        {loading ? ( <div className='loading'>
          <Spin />
        </div>
        ) : (
          <Results facilities={results} />
        )}

Answer 1

您正在设置setLoading('false'); 这是一个字符串，非空字符串在语句中被强制为true 。 您应该设置一个布尔值而不是字符串setLoading(false);

Answer 2

无论您将 loading 设置为'true'还是'false' ，它们的类型都是string而不是boolean ，所以你最好使用true和false 。 顺便说一句，设置'true'可以成功的原因是字符串'true'将转换为boolean类型的true并且字符串'false'与'true'相同。