javascript - 错误: undefined in React useContext and useReducer

Question

我正在尝试使用 useContext 和 useReducer 创建一个 redux 模式。我创建了一个创建上下文的组件(reducer)，并且我也有初始值。我用上述内容声明了我的归约，并返回到由我的Reducer 的值提供的子组件。 然后在下一个图像中，我有一个 View ，它将呈现一个制作表单的组件，该组件被包装在 ExpenseReducer 组件中，以便它具有我的reduce 的值。

在表单中，我导入上下文并尝试使用调度，但出现“未定义”之类的错误

My Code

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;

Answer 1

根据docs :

Don’t forget that the argument to useContext must be the context object itself:

• Correct: useContext(MyContext)
• Incorrect: useContext(MyContext.Consumer)
• Incorrect: useContext(MyContext.Provider)

您的 reducer 正在返回提供者，而不是上下文对象。因此，它会导致 expenseContext 为 未定义。