渲染布局更新反应

Question

我的问题可能是重复的，我只是还没有找到答案，如果它是重复的，请引导我到已经回答的问题。

在用户在文本输入中选择某些值之后，我正在尝试在 React 中创建一个表。 根据用户的选择，我进行了 api 调用，当我得到响应时，我会在表格中显示值，除了尚未显示的值列表，但值显示在控制台上就好了。 这就是我的意思，我在图片中有空白单元格；

这是我的获取代码：

 const functionWithPromise = eventItem => { //a function that returns a promise
    getInstance().then((d2) => {
        eventItem.dataValues.map((dataValue) =>{
            const endpoint = `dataElements/${dataValue.dataElement}.json`;
            d2.Api.getApi().get(endpoint)
                .then((response) => {
                    console.log(response.displayName);
                    dataValue.displayName = response.displayName;
                })
                .catch((error) => {
                    console.log("An error occurred: " + error);
                    alert("An error occurred: " + error);
                });
        });
    });

    return eventItem;
}

const anAsyncFunction = async item => {
    return functionWithPromise(item)
}

const getData = async (list) => {
    return Promise.all(list.map(item => anAsyncFunction(item)))
}

const handleLoadEvents = () => {

    setShowLoading(true);

    var start = moment(startDate);
    var end = moment(endDate);
    var progID = selectedProgram.id;
    var orgID = selectedOrgUnit[0].id;
   
    var id = "LE5Y1Da1Fk4";

    getInstance().then((d2) => {
        const endpoint = `events.json?orgUnit=${id}&program=${progID}`;
        var tempArray = []
        d2.Api.getApi().get(endpoint)
            .then((response) => {

                response.events.map((item) => {
                    var date = moment(item.eventDate);
                    console.log(item)
                    
                    if(date.isBetween(start, end)){
                        tempArray.push(item);
                    }
                });

                console.log(tempArray);

        })
            .catch((err) => {
                console.log("An error occurred: " + err);
                alert("An error occurred: " + err);
                setShowLoading(false);
            })
            .finally(() => {
                console.log(tempArray);

                if(tempArray != null){

                    getData(tempArray)
                        .then((data) => {
                            console.log(data)
                            tempArray = data
                            setEvents(data);
                    }).finally(() =>{
                        setShowMenu(false);
                        setShowEvents(true);
                        setShowLoading(false);

                    });
                } else {
                    alert("events are null! Try again!");
                    setShowLoading(false);
                }

            });
    });

};

在 finally 标记中设置为 true 的 showEvents state 是加载视图的那个。 如果您有任何想法，请提供帮助。