使用 useState 反应 JS 上下文

Question

我正在使用createContext和useState在react js中创建一个简单的例子，但是我做错了什么，看看：

这是我的组件 categoriacontex.js

import { createContext } from "react";

const CategoriaContext = createContext();

export default CategoriaContext;

这是组件 types.js

export const GET_CATEGORIAS = "GET_CATEGORIAS";

这是组件categoriasreducer.js

import { GET_CATEGORIAS } from "../types";

export default (state, action) => {
  const { payload, type } = action;
;
  switch (type) {
    case GET_CATEGORIAS:
      return {
        ...state,
        categorias: payload,
      };
    default:
      return state;
  }
};

这是组件categoriastate.js

import React, { useState } from 'react';
import CategoriaContext from './CategoriaContext';
import CategoriaReducer from './CategoriasReducer';
import Data from '../../Data/Categorias.json';
import { GET_CATEGORIAS } from "../types";

const CategoriaState = (props) => {

    const initialState = {
        categorias: [],
        selectedCategoria: null,
      };
    
    
    const [state, setstate] = useState(CategoriaReducer, initialState);

    const GetCategorias = () => {
        try { 
           setstate({ type: GET_CATEGORIAS, payload: Data });
          } catch (error) {
            console.error(error);
        } 
    };

    return(         
        <CategoriaContext.Provider
                    value={{ 
                            categorias: state.categorias
                    }}                 
        >
            {props.children}
        </CategoriaContext.Provider> 
    )
  
};

export default CategoriaState;

这个是组件app.js

import React, { Component } from 'react';
import './App.css';
import Header from './Component/Header/Header';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import CategoriaState from './Context/Categorias/CategoriaState';
import AddCat from './Component/Categorias/AddCat';
import Allcat from './Component/Categorias/AllCat';

class App extends Component {
  
   
  render(){
    return(
      <CategoriaState>
        <div className="container">        
          <Router>
            <Header />
            <Switch>
              <Route exact path="/">             
                <h1>home</h1>
              </Route>
              <Route path="/addcat">
                <AddCat />
              </Route>
              <Route path="/allcat">
                <Allcat />
              </Route>            
            </Switch>
          </Router> 
        </div>
      </CategoriaState>      
    )
  }
}

export default App;

这是组件 allcat.js

import React, { useEffect }  from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useContext } from 'react';
import CategoriaContext from '../../Context/Categorias/CategoriaContext';

const AllCat = () => {

    const { categorias, GetCategorias }  = useContext( CategoriaContext );

    useEffect(() => {
        GetCategorias();
        
    },[])

    return(
        <div className="container mx-auto">
            <div className="card col-md-5 mx-auto">
                <h4 className="card-title text-center px-0 mx-0 border-bottom">Categorias</h4>            
                <div className="card-body px-0">

                </div>
            </div>
        </div>
    )

};

export default AllCat;

我知道我有一些错误，因为这是我在 react js 中使用上下文的第一个示例，我不想使用上下文和钩子创建一个简单的 crud，我有一个文件数据，这个文件是调用数据，这个文件有一个 id、描述、idfather。

所以请你帮我，更好地处理上下文和使用状态？

Answer 1

在 categoriastate.js 中，您没有设置 Provider 值的 GetCategorias 成员，因此您只能从 useContext( CategoriaContext ) 访问类别，并且 GetCategorias 将是未定义的（在 allcat.js 中）。