使用UseEffect ReactJs后清空數據

Question

我想獲取新聞，但在第一次渲染中我有一個空字典。 我的使用效果

const [news, setNews] = useState({});
const [page, setPage] = useState(1);
const [user, setUser] = useState({});

useEffect(() =>{
    const getNews = async() =>{
        const newsData = await httpClient.get(`/feed/${pk}/?page=${page.toString()}`)
        setNews(newsData.data);
        const userData = await httpClient.get('/profile/')
        setUser(userData)
    }
    getNews();
}, [page])

如何在第一次渲染時獲取數據？

Answer 1

因為你在依賴數組中有[page] - 為初始渲染添加鈎子：

const [page, setPage] = useState(0);

useEffect(() => setPage(1), [])

Answer 2

您將始終擁有您在第一次渲染時初始化它的 state，反應不會等到 useEffect 在渲染之前完成，因為這會鎖定 UI。

在獲取數據時您需要某種加載指示器，例如，您可以這樣做

const [loading, setLoading] = useState(true);
const [news, setNews] = useState({});
const [page, setPage] = useState(1);
const [user, setUser] = useState({});

useEffect(() =>{
    const getNews = async() =>{
        const newsData = await httpClient.get(`/feed/${pk}/?page=${page.toString()}`)
        setNews(newsData.data);
        const userData = await httpClient.get('/profile/')
        setUser(userData)
        setLoading(false)
    }
    setLoading(true)
    getNews();
}, [page])

if (loading) {
  return <>{"loading"}</>
}

將返回值更改為您想要的任何值，也許您只想返回一個空的<></>組件，這樣當它第一次出現時它就會擁有所有數據。