我正在嘗試執行一個函式來更新 setState 但它也需要先加載其他狀態。
const [chatsIds, setChatsIds] = useState([]);
const [chats, setChats] = useState([]);
useEffect(() => {
getChatsIds();
}, []);
useEffect(() => {
getChats();
}, [chats]);
“getChats”需要來自“chatsIds”的值，但是當加載螢屏時，該值不是，只有當我再次重新加載應用程式時，它才會獲得該值。
以下是功能：
const getChatsIds = async () => {
const ids = await getDoc(userRef, "chats");
setChatsIds(ids);
}
const getChats = async () => {
const chatsArr = [];
chatsIds.forEach(async (id) => {
const chat = await getDoc(doc(db, "Chats", id));
chatsArr.push(chat);
console.log(chatsArr);
});
setChats(chatsArr);
}
我已經嘗試過 useEffect 和 useLayoutEffect 鉤子，以及 promises 和 async 函式，但我還沒有發現我做錯了什么:(
uj5u.com熱心網友回復：
問題在于您的useEffect鉤子依賴性。這應該取決于chatsIds不是聊天。
useEffect(() => {
getChats();
}, [chatsIds]);
這意味著獲取chatsIds應該取決于第一次安裝，而獲取chats應該取決于是否chatsIds被更改。
uj5u.com熱心網友回復：
您只需將useEffect鉤子更改為如下所示。
useEffect(() => {
getChatsIds();
}, [chatsIds]);
uj5u.com熱心網友回復：
我認為 getChat() 取決于 chatIds ...
所以你使用 useEffect 和 chatIds 依賴
const [chatsIds, setChatsIds] = useState([]);
const [chats, setChats] = useState([]);
useEffect(() => {
getChatsIds();
}, []);
useEffect(() => {
getChats(chatsIds);
}, [chatsIds]);
const getChatsIds = async () => {
const ids = await getDoc(userRef, "chats");
setChatsIds(ids);
}
const getChats = async (chatsIds) => {
const chatsArr = [];
chatsIds.forEach(async (id) => {
const chat = await getDoc(doc(db, "Chats", id));
chatsArr.push(chat);
console.log(chatsArr);
});
setChats(chatsArr);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/365440.html