Не могу справиться с реакцией загрузки спиннера с помощью useState

Question

Я использую компонент функции, поэтому мне нужно использовать UseState для обработки состояний компонентов. Я пытаюсь показать счетчик при загрузке данных с топором ios:

import { Spinner } from 'react-bootstrap';

const MandatesPage = props => {

  const [mandates, setMandates] = useState([]);
  const [loading, setLoading] = useState(false); //  to handle spinner hide show

   useEffect(() => {
    setLoading(true);  // here loading is true
    console.log(loading)
    axios
        .get(`${config.api}/mandates`)
        .then(response => response.data["hydra:member"],setLoading(false)) // here loading is false
        .then(data => setMandates(data))
        .catch(error => console.log(error.response));
}, []);

 ...
  if (loading) return
    return (
        <Spinner animation="border" variant="primary" />
    );
}

return (
   .....  // return the other logic of my app
 )

}

Моя проблема заключается в том, что счетчик не отображается, и я поставил console.log (загрузка) после setLoading (true), но я получил ложное значение.

Answer 1

Проблема в том, что вы пытаетесь выполнить асинхронную операцию синхронным способом. Вы должны удерживать до тех пор, пока ваш ответ API не вернется, что-то вроде этого:

useEffect(() => {
  async function fetchMyAPI() {
    let url = 'http://something/';
    let config = {};
    const response = await myFetch(url);
    console.log(response);
  }  

  fetchMyAPI();
}, []);

Применительно к вашему примеру:

useEffect(() => {
  setLoading(true);
  async function fetchOnAxios() {
   const response = await axios.get(`${config.api}/mandates`)
    // Down below inside this function
    // you can set the loading based on the response
  }
  fetchOnAxios()
}, []);

Я настоятельно рекомендую эту статью для дальнейшего чтения у него есть примеры и все.

Answer 2

Конечно, loading по-прежнему ложно, потому что параметр asyn c и будет истинным только при следующем рендере.

Для следующего рендера будет возвращен спиннер загрузки, так как загрузка будет правдой, чем. Если для вызовов ax ios требуется короткое время, превышающее 16 - 32 мс, что является нормальным кадром для каждого рендеринга в реакции, спиннер загрузки не будет показан, поскольку загрузка уже будет возвращена к значению false.