react hooks setState 页面渲染初始值为空, 子组件接收到的参数为undefined

export default function Review() {
  const [words, setWords] = useState([]);

  async function getReviewWords() {
    const res = await axios.get(
      'http:/get_review_words',
      {
        params: { user_id },
      },
    );
    return res.data.words;
  }

  useEffect(() => {
    const fetchData = async () => {
      setWords(await getReviewWords());
    };
    fetchData();
  }, []);

  return <Box>
		  <StudyPage words={words}
		 </Box>;
}

直接传入words时，由于words初始值为[]，get请求还没执行结束,子组件接收到的参数为undefined。


解决方法:

1. 在return中添加words的判断

return <Box>{words.length > 0 && <StudyPage words={words} />}</Box>;