我正在尝试创建一个上下文,其默认值将来自外部源。我需要做一些类似于在异步函数之外进行获取的事情(我认为这是不可能的)。问题是:这种场景下如何进行fetch?
import React, { createContext, useState } from "react";
import { Usuario } from "../typings/types";
interface UsuariosContextType {
usuarios: Usuario[]
setUsuario?: React.Dispatch<React.SetStateAction<Usuario[]>>;
}
// I have no ideia how to do it the right way
const usuarios_data = await fetch(`http://localhost:8080/usuarios`, { cache: 'no-store' })
const usuarios_array = await usuarios_data.json()
const usuarios_lista: Usuario[] = usuarios_array
export const UsuariosContext = createContext<UsuariosContextType>({ usuarios: usuarios_lista })
export const UsuariosProvider = (children: React.ReactNode) => {
const [usuarios, setUsuario] = useState<Usuario[]>([])
return (
<UsuariosContext.Provider value={{ usuarios, setUsuario }}>
{children}
</UsuariosContext.Provider >
)
}
要异步加载数据并将其设置为上下文值,您需要使用
useEffect
来加载数据,并使用 useState
来控制加载状态(稍后您可能会使用它来显示微调器)。
在下面的代码片段中,一旦上下文组件安装,我们就会在
useEffect
中进行 API 调用。在useEffect
中,我们还将isLoading
设置为true
。请求完成并解析后,我们使用 finally
将 isLoading
设置为 false
。
import React, { createContext, useState, useEffect } from "react";
import { Usuario } from "../typings/types";
interface UsuariosContextType {
usuarios: Usuario[]
setUsuario?: React.Dispatch<React.SetStateAction<Usuario[]>>;
isLoading: boolean;
}
export const UsuariosContext = createContext<UsuariosContextType>({ usuarios: [], isLoading: false })
export const UsuariosProvider = (children: React.ReactNode) => {
const [usuarios, setUsuario] = useState<Usuario[]>([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setIsLoading(true);
fetch(`http://localhost:8080/usuarios`, { cache: 'no-store' })
.then((data) => data.json())
.then(parsedData => setUsuario(parsedData))
.finally(() => setIsLoading(false));
}, []);
return (
<UsuariosContext.Provider value={{ usuarios, setUsuario, isLoading }}>
{children}
</UsuariosContext.Provider >
)
}