第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React.js 我無法擺脫加載程序圖標(biāo)

React.js 我無法擺脫加載程序圖標(biāo)

侃侃無極 2023-08-24 21:06:17
我正在開發(fā)一個(gè)電影應(yīng)用程序。我在接收數(shù)據(jù)并在屏幕上查看數(shù)據(jù)方面沒有問題。但是當(dāng)我想向我的項(xiàng)目添加加載器時(shí)。它永遠(yuǎn)不會(huì)消失,而不是停留 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 };
查看完整描述

1 回答

?
莫回?zé)o

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

加載資源后,您永遠(yuǎn)不會(huì)將isLoading狀態(tài)設(shè)置回原來的狀態(tài)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>

  );

};


查看完整回答
反對(duì) 回復(fù) 2023-08-24
  • 1 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)