react中forEach和useState一起使用出现的问题

Question

我从后台获取了一组数据，经过处理，用作Ant design List组件的dataSource

大致代码如下：

interface DemoProps {
    selectNode: TreeNode;
}
const Demo: React.FC<DemoProps> = (props) => {

    const [datasousrce, setDatasource] = useState<any[]>([])   //列表数据

    //获取数据
    const getListdata = () => {
        if (selectNode?.key) {
            let Iparam: xxxxx

            //调用接口
            queryListTable(Iparam).then(res => {
                console.log(res.data);

                let arr:any[] = []
                res.data.forEach((item:any)=>{
                    arr.push({
                        title:item.id,
                        createtime:item.createTime
                    })
                    setDatasource(arr)    //设置列表数据
                })
                
            }).catch(error => message.error(`${error}`))
        }
    }
    
    useEffect(() => {
        getListdata()
    }, [selectNode.key])
    
    /**
     * 该行会打印两次，第一次是完整的处理后的数据，
     * 第二次数据只剩下两条了
     */
    console.log(datasousrce);    
    
        const renderList = () => {
        if (datasousrce) {
            return (
                <>
                    <List
                        bordered={true}
                        className="demo-loadmore-list"
                        // loading={initLoading}
                        itemLayout="horizontal"
                        // loadMore={loadMore}
                        dataSource={datasousrce}
                        renderItem={item => (
                            <List.Item
                                actions={[<a key="list-loadmore-edit" onClick={() => SetcontractModalVisible(true)}>查看</a>, <a key="list-loadmore-edit1" onClick={deleteContract}>删除</a>]}
                            >
                                <List.Item.Meta
                                    avatar={
                                        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                    }
                                    title={<a href="https://ant.design">{item.title}</a>}
                                    description={item.createtime}
                                />
                            </List.Item>
                        )}
                    />
                </>
            )
        }
    }
    
    return (
        <>
            <div>
                {renderList()}
            </div>
        </>
    )
}
export default Demo

最终效果大致如图所示

现在的问题是，我点击selectNode发送请求获取数据后，列表中只显示两条或者一条数据，但是如果再点击列表“查看”按钮（该按钮会弹出一个Modal框，但是并没有对接任何数据），列表中的所有数据就出来了，很奇怪，这是因为forEach、useState和promise一起使用出现了什么问题吗？

Answer 1

setDatasource是不是应该放在forEach外面呢?