这是代码

const [wordList, setwordList] = useState([]);
useEffect(() => {
        Axios.post('http://localhost:3001/chapterList').then((response) => {
            setwordList(response.data)

        });
    }, [])

我想做的是

return (
        <div className="Doughnut">
            <h2>{wordList[0].id}</h2>
            <Doughnut data={doughnutData} />
        </div>
      );

这里有问题。我已经检查了wordlist[0].id是否未定义，这给出了正确的值。但当我尝试在h2标记中使用时，它是未定义的。我认为这是因为网页在wordlist[0]获得值之前呈现。
问题的原因是什么？如何解决？