使用UseEffect ReactJs后为空数据

Question

我想获得新闻，但在第一次渲染中我有一个空字典。我的useEffect

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

您将始终保持第一次渲染时初始化的状态，react不会等到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"}</>
}

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