反应上下文中的问题 api

Question

Facing issues in react context api, getting undefined while transferring anything using context api. getting this error, getting undefined when sending functions through context api.

*** Context.js

import React, { useReducer, createContext } from "react";
import contextReducer from "./contextReducer";

const initialState = [];

export const ExpenseTrackerContext = createContext(initialState);

export function Provider({ children }) {
  const [transactions, dispatch] = useReducer(contextReducer, initialState);`enter code here`

  const deleteTransaction = (id) =>
    dispatch({ type: "DELETE_TRANSACTION", payload: id });
  const addTransaction = (transaction) =>
    dispatch({ type: "ADD_TRANSACTION", payload: transaction });
 

  return (
    <ExpenseTrackerContext.Provider
      value={{
        deleteTransaction,
        addTransaction,
        transactions,
      }}
    >
      {children}
    </ExpenseTrackerContext.Provider>
  );
}***

getting undefined in this file while using the function in this file Form.js > and getting error addTransaction is not a function

 *** Form.js 
 import React, { useState, useContext } from "react";
    import {
      TextField,
      Typography,
      Grid,
      FormControl,
      InputLabel,
      Select,
      MenuItem,
      Button,
    } from "@material-ui/core";
    
  
    import { ExpenseTrackerContext } from "../../context/context";
    
    import { v4 as uuidv4 } from "uuid";
    import useStyles from "./styles";
    
    const initialState = {
      amount: "",
      category: "",
      type: "Income",
      date: new Date(),
    };
    
    const Form = (props) => {
      const classes = useStyles();
      const [formData, setFormData] = useState(initialState);
    
      // console.log(useContext(ExpenseTrackerContext));
    
      const { addTransaction } = useContext(ExpenseTrackerContext);
    
      console.log("context: " + ExpenseTrackerContext.displayName);
      console.log("add: " + typeof addTransaction);
    
      const createTransaction = () => {
        const transaction = {
          ...formData,
          amount: Number(formData.amount),
          id: uuidv4(),
        };
        addTransaction(transaction);
        setFormData(initialState);
      };
      return (
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <Typography align="center" variant="subtitle2" gutterBottom>
              ...
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <FormControl fullWidth>
              <InputLabel>Type</InputLabel>
              <Select
                value={formData.type}
                onChange={(e) => setFormData({ ...formData, type: e.target.value })}
              >
                <MenuItem value="Income">Income</MenuItem>
                <MenuItem value="Expense">Expense</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={6}>
            <FormControl fullWidth>
              <InputLabel>Category</InputLabel>
              <Select
                value={formData.category}
                onChange={(e) =>
                  setFormData({ ...formData, category: e.target.value })
                }
              >
                <MenuItem value="business">Business</MenuItem>
                <MenuItem value="Salary">Salary</MenuItem>
              </Select>
            </FormControl>
          </Grid>
    
          <Grid item xs={6}>
            <TextField
              type="number"
              label="Amount"
              fullWidth
              value={formData.amount}
              onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
            />
          </Grid>
    
          <Grid item xs={6}>
            <TextField
              type="date"
              label=" "
              fullWidth
              value={formData.date}
              onChange={(e) => setFormData({ ...formData, date: e.target.value })}
            />
          </Grid>
          <Button
            className={classes.button}
            variant="outlined"
            color="primary"
            fullWidth
            onClick={createTransaction}
          >
            Create
          </Button>
        </Grid>
      );
    };
    
    export default Form; ***

Answer 1

why?

you are forget to call the context with in From.js . Because you are created the context hook with same page

Better create the context file seperate js file

context.js

import React,{createContext}  from 'react';

export const ExpenseTrackerContext = createContext(null);

Contextr.js

   import {ExpenseTrackerContext} from './context.js' // path of context.js

From.js

import React,{useContext}  from 'react';
import {ExpenseTrackerContext} from './context.js' // path of context.js

   export default function From(props){
   const expContext = useContext(ExpenseTrackerContext);
   
   expContext.addTransaction()// you could call like this
   ...

Updated - React Doc

Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree.

Context passing value only with in tree of children. please check Form.js is execute inside the {children} component of context provider. if you are using parallel or sibling component its does not work

<ExpenseTrackerContext.Provider
      value={{
        deleteTransaction,
        addTransaction,
        transactions,
      }}
    >
      {children} // From.js present in this children in any one of the tree otherwise undefined (value only passed inside the provider component tree)
    </ExpenseTrackerContext.Provider>