React.js 我无法摆脱加载程序图标

Question

我正在开发一个电影应用程序。我在接收数据并在屏幕上查看数据方面没有问题。但是当我想向我的项目添加加载器时。它永远不会消失，而不是停留 1-2 秒。

const Movies = () => {

  const { movies, isLoading } = useGlobalContext();

  if (isLoading) {

    return <div className="loading"></div>;

  }

  return (

    <section className="movies">

      {movies.map((movie) => {

        const {

          imdbID: key,

          Poster: poster,

          Title: title,

          Year,

          year,

        } = movie;

        return (

          <Link to={`/movies/${key}`} key={key} className="movie">

            <article>

              <img src={poster} alt={title} />

              <div className="movie-info">

                <h4 className="title">{title}</h4>

                <p>{year}</p>

              </div>

            </article>

          </Link>

        );

      })}

    </section>

  );

};

这是我的上下文页面useGlobalContext，isLoading来自这里

const AppContext = React.createContext();

const AppProvider = ({ children }) => {

  const [isLoading, setIsLoading] = useState(true);

  const [isError, setError] = useState({ show: false, msg: "" });

  const [movies, setMovies] = useState([]);

  const [query, setQuery] = useState("spider-man");

  const fetchMovies = async (url) => {

    setIsLoading(true);

    try {

      const response = await fetch(url);

      const data = await response.json();

      if (data.Response === "True") {

        setMovies(data.Search);

        setError({ show: false, msg: "" });

      } else {

        setError({ show: true, msg: data.Error });

      }

    } catch (error) {

      console.log(error);

    }

  };

  useEffect(() => {

    fetchMovies(`${API_ENDPOINT}&s=${query}`);

  }, []);

  return (

    <AppContext.Provider

      value={{ isLoading, isError, movies, query, setQuery }}

    >

      {children}

    </AppContext.Provider>

  );

};

export const useGlobalContext = () => {

  return useContext(AppContext);

};

export { AppContext, AppProvider };

Answer 1

加载资源后，您永远不会将isLoading状态设置回原来的状态falseconst AppProvider = ({ children }) => {&nbsp; const [isLoading, setIsLoading] = useState(true);&nbsp; const [isError, setError] = useState({ show: false, msg: "" });&nbsp; const [movies, setMovies] = useState([]);&nbsp; const [query, setQuery] = useState("spider-man");&nbsp; const fetchMovies = async (url) => {&nbsp; &nbsp; setIsLoading(true);&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; const response = await fetch(url);&nbsp; &nbsp; &nbsp; const data = await response.json();&nbsp; &nbsp; &nbsp; if (data.Response === "True") {&nbsp; &nbsp; &nbsp; &nbsp; setMovies(data.Search);&nbsp; &nbsp; &nbsp; &nbsp; setError({ show: false, msg: "" });&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; setError({ show: true, msg: data.Error });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; setIsLoading(false); // <--- added this bit&nbsp; &nbsp; } catch (error) {&nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; setIsLoading(false); // <--- added this bit&nbsp; &nbsp; }&nbsp; };&nbsp; useEffect(() => {&nbsp; &nbsp; fetchMovies(`${API_ENDPOINT}&s=${query}`);&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <AppContext.Provider&nbsp; &nbsp; &nbsp; value={{ isLoading, isError, movies, query, setQuery }}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; </AppContext.Provider>&nbsp; );};