时间戳

首页 > 解决方案 > 如何使用 React Hooks 和 Context API 正确地将来自 useEffect 内部调用的多个端点的数据添加到状态对象？

reactjs - 如何使用 React Hooks 和 Context API 正确地将来自 useEffect 内部调用的多个端点的数据添加到状态对象？

问题描述

我在fetchData函数内部调用firestore，然后将接收到的数据添加到状态对象，但问题是全局状态被最后一个api调用覆盖，如我的console.log输出所示：

控制台日志输出

这是我的代码：

import React, { useState, useEffect } from 'react';

import { db } from './firebase';

export const StateContext = React.createContext();

export function ContextController({ children }) {
    const intialState = {
        projectList: [],
        blogList: [],
        count: 0
    };

    const [state, setState] = useState(intialState);

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

    async function fetchData() {
        // get all projects
        db.collection('projects')
            .get()
            .then((querySnapshot) => {
                const data = querySnapshot.docs.map((doc) => doc.data());
                let sorted = [];

                // loop through each object and push to sorted array
                data.forEach((item) => {
                    sorted.push(item.body);
                });
                // reverse sort the projects
                sorted.sort(
                    (a, b) => parseInt(b.project_id) - parseFloat(a.project_id)
                );
                setState({
                    ...state,
                    projectList: sorted
                });
            });

        // get all blogs
        db.collection('blog')
            .get()
            .then((querySnapshot) => {
                const data = querySnapshot.docs.map((doc) => doc.data());
                setState({
                    ...state,
                    blogList: data
                });
            });
    }

    return (
        <StateContext.Provider value={[state, setState]}>
            {children}
        </StateContext.Provider>
    );
}

如何正确地将来自两个端点的数据添加到状态对象，以便我可以在我的应用程序的任何位置访问它？

标签： reactjsfirebasereact-hooksreact-contextuse-effect

解决方案

我认为问题在于您将旧状态传播到setState已经过时的状态。React 围绕 setState 做了一些性能增强，这将使这样的代码无法按预期工作。

要尝试的一件事是使用 setState 回调。

setState((state) => ({
                ...state,
                projectList: sorted
            }));

推荐阅读