Как добавить блесну в реаги js, используя машинопись

Question

Я пытаюсь добавить спиннер в компонент реакции. Но он не удаляет счетчик после извлечения данных из API. Что я делаю не так?

Вот код ниже

import React, { useState } from "react";
import Form from "../components/form";
import Movie from "../components/movie";
import Loader from "../components/loader";

const MoviePage: React.FC = () => {
  const APP_ID = "***************";
  const [query, setQuery] = useState([]);
  let load: boolean = true;

  const addQuery = (query: any) => {
    const newQuery: any = query;
    setQuery(newQuery);
    console.log(newQuery);
  };

  const searchQuery = async (querys: string) => {
    const response = await fetch(
      `https://api.themoviedb.org/3/search/movie?api_key=${APP_ID}&query=${querys}`
    );
    const data = await response.json();
    if (data) {
      load = false;
    }
    addQuery(data.results);
    //console.log(query);
  };

  return (
    <React.Fragment>
      <Form onSearch={searchQuery} />
      {load ? <Loader /> : <Movie query={query} />}
    </React.Fragment>
  );
};

export default MoviePage;

Компонент загрузчика

import React from "react";

const Loader = () => {
  return (
    <div className="preloader-wrapper big active loader">
      <div className="spinner-layer spinner-blue-only">
        <div className="circle-clipper left">
          <div className="circle"></div>
        </div>
        <div className="gap-patch">
          <div className="circle"></div>
        </div>
        <div className="circle-clipper right">
          <div className="circle"></div>
        </div>
      </div>
    </div>
  );
};

export default Loader;

Answer 1

Вам нужно перевести переменную загрузки в состояние компонента, иначе React проигнорирует ее.

const [load, setLoad] = React.useState(true);

Затем вызовите setLoad (false), чтобы скрыть счетчик

Answer 2

Запись компонента загрузчика, как показано ниже:

import React from 'react'
import {ClipLoader} from "react-spinners";

const Loader = ({ loading, message, css, size }) => {

    if (size === undefined)
        size = 40;

    return loading ? (
        <div className='overlay-content'>
            <div className='wrapper'>
                <ClipLoader
                        css={css}
                        size={size}
                        color={"#123abc"}
                        loading={loading}
                    />
                <span className='message'>
                    {message}
                </span>
            </div>
        </div>
    ) : null
};

export default Loader;

Запись компонента PostPage, как показано ниже:

import React, {useEffect, useState} from "react";
import Loader from "./Loader";
import axios from 'axios';

function PostPage() {
    const [posts, setPost] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        setIsLoading(true);
        let isSubscribed = true;
        axios.get(`https://jsonplaceholder.typicode.com/posts`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
                setIsLoading(false);

            }).catch(err => {
            setIsLoading(false);
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    return (
        <React.Fragment>
            <ul>
                {
                    isLoading ?
                        <Loader css='margin-left: 48%; margin-top: 10%' loading={isLoading}/> :
                        posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </React.Fragment>
    );
}

export default PostPage;

Затем используйте этот компонент в приложении. js как показано ниже:

import React from "react";
import ReactDOM from 'react-dom';
import PostPage from "./PostPage";

class App extends React.Component {
  render() {
    return (
        <PostPage/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

export default App;