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状态设置回原来的状态false

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

      }

      setIsLoading(false); // <--- added this bit

    } catch (error) {

      console.log(error);

      setIsLoading(false); // <--- added this bit

    }

  };

  useEffect(() => {

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

  }, []);

  return (

    <AppContext.Provider

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

    >

      {children}

    </AppContext.Provider>

  );

};