React Context API和生命周期方法-如何一起使用

Question

我正在努力了解如何继续使用我正在制作的小型React应用。

我有一个预算跟踪器，您可以在其中添加成本（按揭，账单等），并且它们具有成本价值。每次添加，编辑或删除其中之一时，我都希望更改存储在上下文中的全局状态。

我基本上有一个“剩余余额”值，每次发生变化时我都要重新计算。

我认为我会使用生命周期方法或useEffect，但是当我在App.js中使用它（以便它监视所有子组件中的更改）时，我无法使其正常工作，因为生命循环方法正在从我的上下文中调用方法，但是由于它没有包装在提供程序中，因此无法在上下文中访问该方法。

这是一个常见问题，是否有建议的解决方法？我似乎在GoOgLe上找不到类似的问题。

App.js：

import React, { useState, useContext, useEffect } from "react";
import "./css/main.css";
import Header from "./layout/Header";
import BudgetInfo from "./components/BudgetInfo";
import PaymentForm from "./components/PaymentForm";
import CostToolbar from "./components/CostToolbar";
import Costs from "./components/Costs";

import BudgetContext from "./context/budgetContext";
import BudgetState from "./context/BudgetState";

const App = () => {

  const budgetContext = useContext(BudgetContext);

  const { updateBalance } = budgetContext;


  useEffect(() => {
    updateBalance();
  });

  return (
    <BudgetState>
      <Header darkModeToggle={toggleDarkMode} />
      <main
        className={"main-content" + (darkMode.darkMode ? " dm-active" : "")}
      >
        <div className="wrap content-wrap">
          <BudgetInfo />
          <PaymentForm />
          <CostToolbar />
          <Costs />
        </div>
      </main>
    </BudgetState>
  );
};

export default App;

Answer 1

您需要包装App组件。试试简单的例子。

import React, { useEffect, useContext } from 'react';
import ThemeContext from './../context/context';

const Sample = () => {
  const context = useContext(ThemeContext);

  useEffect(() => {
    console.log(context,'--')
  },[])

  return(
    <ThemeContext.Consumer>
      {color => (
        <p style={{ color }}>
          Hello World
        </p>
      )}
    </ThemeContext.Consumer>
  )
}

export default Sample;