相关疑难解决方法(0)

我正在尝试了解 React 上下文 API，并且正在阅读官方文档。如果有人可以对以下几点进行更多说明，我将不胜感激，因为官方文档没有明确说明。

1. 使用 Provider 提供的值的 contextType 和 Consumer 方法有什么区别？在什么情况下我们应该使用哪种方法？
2. Provider 在基于类的组件中公开的值是否可以由使用 useContext 的 React 钩子组件使用？我有相同的设置，我最终将 useContext 转换为 Context.Consumer。
3. 我有一个非常简单的设置，其中我有一个基于 Provider 类的组件，它暴露了一些状态值。Provider 只有一个子组件，它也是消费者。当我在孩子中使用 Context.Consumer 来获取值时，一切都按预期工作。但是当我在子组件中使用 contextType 时，我看到一个空对象。

上下文提供者.js

import React from "react";
import {ContextConsumer} from "./ContextConsumer";
export const TestContext = React.createContext({
    count: 1,
    incrCount: (count)=>{
     console.log(`count value :- ${count}`)
     }
});

export class ContextProvider extends React.Component {
  incrCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  state = {
    count: 5,
    incrCount: this.incrCount,
  };

  render() { …

我有一个上下文，我将其导入到我的功能组件中：

import { TaskContexts } from "../../../contexts";

上下文存储数据和函数。

数据来自上下文并显示在站点上。

const {
    editTodo,
    setEditID,
    toggleTodoCompletion,
    editID,
    editTodoHandler,
    removeTodo,
    state,
    text,
    isEditError,
 } = useContext(TaskContexts);

但！

<button onClick={() => editTodo(todo.id)}>
   <img src={editIcon} alt="edit button"></img>
</button>

当我尝试调用 editTodo 函数时，它失败并出现以下错误：

Uncaught TypeError: editTodo is not a function

如何修复这个错误？

UPD。

完整组件代码

import React, { useState } from 'react';
import ACTION_TYPES from '../ToDo/reducer/actionTypes';
import RenderedTable from './RenderedTable';
import styles from './TaskList.module.scss';
import allIcon from '../../icons/all.svg';
import completedIcon from '../../icons/completed.svg';
import notCompletedIcon from '../../icons/notCompleted.svg';
import mona from …