React函数组件使用ContextAPI开发支出跟踪器报错如何解决

错误原因 #

• 函数组件不存在this实例，你代码中调用的this.props.children属于类组件的写法，函数组件无法读取this.props属性，这就是你看到的报错的直接诱因。
• createContext方法不能写在Provider组件内部，否则每次Provider组件重新渲染时都会生成全新的Context实例，之前的Context绑定关系会全部失效，无法实现全局状态共享的需求。

修正后的代码 #

1. Context和Provider组件代码 #

// createContext要放在Provider组件外部定义，可传入默认值
const ExpenseNumbers = createContext();

function ExpenseNumbersProvider ({ children }) {
  const [monthly, setMonthly] = useState(0);
     
  return(
    <ExpenseNumbers.Provider value={{ monthly, setMonthly }}>
      {/* 直接使用入参接收的children，不需要调用this.props */}
      {children}
    </ExpenseNumbers.Provider>
  )
} 

// 导出Context供下级组件消费
export { ExpenseNumbers, ExpenseNumbersProvider }

2. 原有App组件代码无需修改，保持现有写法即可 #

function App(){
  return(
    <ExpenseNumbersProvider>
      <div className="flex-container">
        <div className="left">
          <Input /> 
          <Graph />
        </div>
        <ExpenseLog />
      </div>
    </ExpenseNumbersProvider>
  )
};

下级组件消费Context示例 #

如果业务组件需要读取共享的monthly状态，可通过useContext钩子直接获取：

import { useContext } from 'react'
import { ExpenseNumbers } from 'Provider对应文件路径'

function Input() {
  // 直接解构获取需要的状态和修改方法
  const { monthly, setMonthly } = useContext(ExpenseNumbers)
  // 后续编写业务逻辑即可
}

内容的提问来源于stack exchange，提问作者anthonybp12