ОШИБКА: не определено в React useContext и useReducer - PullRequest
Новая
       9

ОШИБКА: не определено в React useContext и useReducer

0 голосов
/ 05 февраля 2020

Я пытаюсь создать шаблон с использованием useContext и useReducer. Я создаю компонент, который создает контекст (reducer), и у меня также есть начальные значения. Я заявляю о своем сокращении с учетом вышеизложенного и возвращаюсь к дочернему компоненту, который предоставляется значениями моего Reducer. Затем на следующем изображении у меня будет представление, которое будет визуализировать компонент, который создает форму и который обернут в компонент ExpenseReducer, чтобы он имел значения моего приведения.

В форме Я импортирую контекст и пытаюсь использовать диспетчеризацию, но получаю сообщение об ошибке «undefined»

Мой код 

import React from "react";

//Context

export const ExpenseContext = React.createContext();

// Reducer
const reducer = (state, action) => {
  switch (action.type) {
    case "HANDLE_SUBMIT":
      return alert("Guardado");

    default:
      return state;
  }
};
// Valores iniciales
const initialExpenses = [
  { id: "37c237f8-3004-4f69-9101-62f59ba4ce09", charge: "carne", amount: "20" },
  {
    id: "32bf7455-61c8-48d5-abe1-a38c93dcf1c8",
    charge: "internet",
    amount: "20"
  },
  { id: "7e22c2e8-7965-41fe-9f39-236f266c9f24", charge: "ca", amount: "1" }
];

function ExpenseReducer({ children }) {
  const [expenses, dispatch] = React.useReducer(reducer, initialExpenses);
  return (
    <ExpenseContext.Provider value={{ expenses, dispatch }}>
      {children}
    </ExpenseContext.Provider>
  );
}

export default ExpenseReducer;


import React from "react";

// Components
import ExpenseForm from "../components/ExpenseForm";
import ExpenseReducer from "../reducers/ExpenseReducer/ExpenseReducer";

function ExpenseNew() {
  return (
    <ExpenseReducer>
      <ExpenseForm />
    </ExpenseReducer>
  );
}


import React, { useContext } from "react";
import "./ExpenseForm.scss";
import { ThemeContext } from "../App";
import { ExpenseContext } from "../reducers/ExpenseReducer/ExpenseReducer";

const ExpenseForm = () =>
  // {
  //   // edit,
  //   // charge,
  //   // amount,
  //   // handleCharge,
  //   // handleAmount,
  //   // handleSubmit
  // }
  {
    // Theme
    const { theme } = useContext(ThemeContext);
    const { expenseContext } = useContext(ExpenseContext);
    return (
      <form
        className="form"
        onSubmit={expenseContext.dispatch("HANDLE_SUBMIT")}
      >
        <div className="form-group">
          {/*To conect the value with the variable */}
          <input
            type="text"
            className={`${theme} form-control`}
            // id="charge"
            // name="charge"
            // placeholder="Gasto"
            // value={charge}
            // onChange={handleCharge}
          />
        </div>
        <div className="form-group">
          {/*To conect the value with the variable */}
          <input
            type="number"
            className={`${theme} form-control`}
            // id="amount"
            // name="amount"
            // placeholder="Cuanto"
            // value={amount}
            // onChange={handleAmount}
          />
          <textarea
            placeholder="Descripción"
            className={`${theme} form-control`}
            id=""
            cols="30"
            rows="10"
          ></textarea>
        </div>
        <button type="submit" className={`btn ${theme}`}>
          {true ? "Editar" : "Guardar"}
        </button>
      </form>
    );
  };

export default ExpenseForm;

1 Ответ

1 голос
/ 05 февраля 2020

Согласно документам :

Не забывайте, что аргументом для useContext должен быть сам объект контекста:

  • Правильно: useContext (MyContext)
  • Неверно: useContext (MyContext.Consumer)
  • Неверно: useContext (MyContext.Provider)

Ваш редуктор возвращает провайдера , а не объект контекста. Следовательно это приводит к expenseContext, являющемуся undefined.

...