如何使 useState 挂钩与我的函数一起使用？答案

【问题标题】：How do I make useState hook work with my function?如何使 useState 挂钩与我的函数一起使用？
【发布时间】：2022-01-03 10:07:06
【问题描述】：

我正在尝试执行一个函数来更新 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 函数，但我没有发现我做错了什么:(

【问题讨论】：

标签： javascript reactjs google-cloud-firestore async-await react-hooks

【解决方案1】：

问题在于您的 useEffect 挂钩依赖项。它应该取决于chatsIds 而不是聊天。

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

这意味着获取chatsIds 应该取决于第一次挂载，而获取chats 应该取决于chatsIds 是否已更改。

【讨论】：

我可能会将chatsIds 作为参数传递给getChats 以使其明确。
这也是个好主意@Andy
我尝试了你所说的，但 似乎仍然不起作用 :(，chatsIds 取决于第一次安装，现在 我将聊天更改为取决于聊天 ID，但是当我尝试 console.log 聊天以在另一个 useffect 中测试它时，取决于聊天 它返回一个空数组
您的 chatsArr 变量是否获得了所有值？
不，它们没有任何价值，如果可能有更简单或不同的方法来做到这一点，我想知道

【解决方案2】：

您只需将useEffect 挂钩更改为如下所示。

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

【讨论】：

我尝试了你所说的，但 仍然无法正常工作:(，chatsIds 取决于第一次安装，现在 我将聊天更改为取决于聊天 ID，但是当我尝试 console.log 聊天以在另一个 useffect 中测试它取决于聊天它返回一个空数组 idk 为什么:(

【解决方案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);
}

【讨论】：