rtk-query 设置上下文值时出现问题

Question

我正在使用 rtk-query 从 API 获取数据。我还有用于子组件的上下文。我面临的问题是在数据完成获取之前渲染上下文。这是我的代码：

export const defaultContext = {
    header: {},
};
export const MyContext = React.createContext(defaultContext);

export default function Page() {
    const [myData, setMyData] = useState();
    useEffect(() => {
        const { data, isError, isFetching, isLoading } = useFetchMyQuery();
        setMyData(data);

    }, [data, isError, isFetching, isLoading ]);

    if (isFetching) {
        return <Loader message={loadingText} />;
    }

    return (
      <DndProvider backend={HTML5Backend}>
        <MyContext.Provider value={myData}>
          <div className={`${styles.page} ${className}`}>
            <div className={styles.leftSide} />
            <div className={styles.rightSide} />
            {children}
          </div>
        </MyContext.Provider>
      </DndProvider>
    );
}

我在这里做错了什么？ Tnx.

Answer 1

你不应该在这里使用

useEffect

。同样，没有状态。它应该看起来像这样：

export const defaultContext = {
    header: {},
};
export const MyContext = React.createContext(defaultContext);

export default function Page() {
    const { data, isError, isFetching, isLoading } = useFetchMyQuery();

    if (isFetching) {
        return <Loader message={loadingText} />;
    }

    return (
      <DndProvider backend={HTML5Backend}>
        <MyContext.Provider value={data}>
          <div className={`${styles.page} ${className}`}>
            <div className={styles.leftSide} />
            <div className={styles.rightSide} />
            {children}
          </div>
        </MyContext.Provider>
      </DndProvider>
    );
}