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

Posted 2023-02-22

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

【英文标题】：How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?

【发布时间】：2020-04-05 04:46:48

【问题描述】：

我在 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>
    );

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

【参考方案1】：

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

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

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

【讨论】：

哇，好用，回调绝对是问题所在。谢谢！