有什么方法可以使用 api 中的数据初始化上下文吗？

Question

我正在尝试创建一个上下文，其默认值将来自外部源。我需要做一些类似于在异步函数之外进行获取的事情（我认为这是不可能的）。问题是：这种场景下如何进行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 >
    )
}

Answer 1

要异步加载数据并将其设置为上下文值，您需要使用

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 >
    )
}