如何使 useState 掛鈎與我的 function 一起使用？

Question

我正在嘗試執行 function 來更新 setState 但它也需要先加載其他 state。

    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 函數，但我沒有發現我做錯了什么:(

Answer 1

問題在於您的useEffect掛鈎依賴項。 它應該取決於chatsIds而不是聊天。

useEffect(() => {
    getChats();
}, [chatsIds]);

這意味着獲取chatsIds應該取決於第一次掛載，而獲取chats應該取決於chatsIds是否被更改。

Answer 2

您只需將useEffect掛鈎更改為如下所示。

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

Answer 3

我認為 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);
}