在 React JS 中使用路由器时如何使用 Context API 传递状态

Question

我有一个上下文 API 文件设置，它有一个状态和一个从 API 获取数据并设置状态的函数，我想将状态传递给我的其他组件。在我的 App.js 中，我使用 React-Router 来指定路由。如何在使用 React-Router 的同时使用 Context API 将状态传递给这些组件。

我的 ApiContext.js 文件如下所示：

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

export const ApiContext = createContext();

export const ApiProvider = async (props) => {
    const [data, setData] = useState(null);

    const getURL = 'https://examplefetchsite.com';
    const response = await fetch(getURL).json();
    setData(response);
    return (
        <ApiContext.Provider value={[data, setData]}>
            {props.children}
        </ApiContext.Provider>
    );
}

我的 App.js 的返回是这样的：

return (
      <ApiProvider>
        <Router>
          <div>
            <NavBar />
            <Switch>
            <Route path="/" exact component={ Dashboard } />
            <Route path="/create" component={ Create } />
            <Route path="/view" component={View} />
            </Switch>
          </div>
        </Router>
      </ApiProvider>
    )

Answer 1

ApiProvider

<ApiContext.Provider value={{data, setData}}>

子组件

const context = useContext(ApiContext); 
console.log(context.data); 
context.setData(123);

Answer 2

就上下文本身而言，您无需更改提供程序中的任何内容，只需在子组件中执行类似操作：

import React, {useContext} from 'react'
import {ApiContext} from './ApiContext'

const Dashboard = (props) => {
    const [data, setData] = useContext(ApiContext)

    //you should have access to both data and setData

    return (
        //things
    )
}

但是在ApiContext.js 中，您没有正确调用 API 请求。您应该使用useEffect 仅在第一次渲染时获取数据。

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

export const ApiContext = createContext();

export const ApiProvider = (props) => {
    const [data, setData] = useState(null);

    useEffect(async () => {
        const getURL = 'https://examplefetchsite.com';
        const response = await fetch(getURL).json();
        setData(response);
    }, [])

    return (
        <ApiContext.Provider value={[data, setData]}>
            {props.children}
        </ApiContext.Provider>
    );
}