Как использовать Context API для передачи состояния при использовании маршрутизатора в React JS - PullRequest
Новая
       17

Как использовать Context API для передачи состояния при использовании маршрутизатора в React JS

0 голосов
/ 10 апреля 2020

У меня есть настройка файла Context API, которая имеет состояние и функцию, которая извлекает данные из API и устанавливает состояние, и я хочу передать это состояние другим моим компонентам. В моем приложении. js я использую React-Router для указания маршрутов. Как передать состояние этим компонентам с помощью Context API, при этом используя React-Router.

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

My App. * Возвращение 1010 * выглядит так: 

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

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

С точки зрения самого контекста вам не нужно ничего менять в вашем провайдере, а делать только что-то подобное в дочерних компонентах: 

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>
    );
}
0 голосов
/ 10 апреля 2020

ApiProvider 

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

Дочерний компонент 

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