如何让useState Hook配合自定义函数正常运行？依赖state加载不及时怎么办

存在的问题 #

• 触发getChats的useEffect依赖配置错误：你当前监听的是chats状态，但getChats的执行依赖chatsIds，chatsIds更新时并不会触发该useEffect执行，首次加载chatsIds异步获取完成后不会自动调用拉取聊天列表的逻辑。
• getChats内的异步循环写法错误：forEach不会等待异步回调执行完成，所有getDoc请求返回前，setChats就已经执行，此时拿到的chatsArr是空数组，后续请求返回后往数组push值也不会触发state更新。

修复方案 #

1. 修正useEffect依赖 #

把触发getChats的useEffect依赖改为chatsIds，同时添加空值判断，避免chatsIds为空时执行无效逻辑：

const [chatsIds, setChatsIds] = useState([]);
const [chats, setChats] = useState([]);

useEffect(() => {
    getChatsIds();
}, []);

// 监听chatsIds变化，有值时才拉取聊天列表
useEffect(() => {
    if(chatsIds.length) {
        getChats();
    }
}, [chatsIds]);

2. 修正getChats的异步逻辑 #

用Promise.all等待所有聊天请求完成后再统一更新state：

const getChatsIds = async () => {
    const ids = await getDoc(userRef, "chats");
    setChatsIds(ids);
}

const getChats = async () => {
    // 批量生成所有请求的Promise
    const chatRequests = chatsIds.map(id => getDoc(doc(db, "Chats", id)));
    // 等待所有请求完成
    const chatsArr = await Promise.all(chatRequests);
    // 统一更新状态
    setChats(chatsArr);
}   

内容的提问来源于stack exchange，提问作者González López David