使用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"}</>
}

将返回值更改为您想要的任何值，也许您只想返回一个空的<></>组件，这样当它第一次出现时它就会拥有所有数据。