React.js映射函数不显示useState的值

Question

我正在使用新的hooks API。我有这段状态代码：

const [feedbackArray, setFeedbackArray] = useState<Feedback[]>([]);

接下来，我使用以下函数更新此数组的值

const submitWord = (word: string) => {
    if (word.length === wordLength) {
        fetch(process.env.REACT_APP_ENDPOINT + "/rounds", {method: "POST", body: word})
            .then(response => response.json())
            .then((feedback: Feedback) => {
                if (feedbackArray) {
                    setFeedbackArray([...feedbackArray, feedback])
                }
            })
    }
}

我用一个按钮调用函数

<Button onClick={() => submitWord(word)}>Submit word</Button>

下一步，我要在某些元素中显示值

return (<div>
<!--some code-->
{
    feedbackArray.map((feedback: Feedback) => {
        return (<div>
            <p>{feedback.letter}</p>
            <TextField value={feedback.letter}/>
            <TextField value={feedback.status}/>
        </div>)
    })}
</div>)

但是feedback.letter中的值为空。我在这里做错了什么？我必须使用useEffect挂钩吗？那我该怎么用呢？