使用上下文 API 在函数组件中未定义反应状态属性

我是 React 上下文 API 和函数组件挂钩的新手。我正在尝试将状态传递给子组件ActivityTable.js。我将提供程序包裹在应用程序 ( App.js )周围，但是ActivityTable.js 中的状态属性仍未定义-- TypeError: Cannot read property 'id' of undefined。

任何指导将不胜感激。

应用程序.js

import ActivityState from "./context/activities/ActivityState";

const App = () => {
  return (
    <StylesProvider injectFirst>
      <ContactState>
        <ActivityState>
          ...
        </ActivityState>
      </ContactState>
    </StylesProvider>
  );
};

export default App;

活动状态.js

import React, { useReducer } from 'react';
import ActivityContext from './ActivityContext';
import ActivityReducer from './ActivityReducer';
import { ADD_ACTIVITY, DELETE_ACTIVITY, SET_CURRENT_ACTIVITY } from '../types';

const ActivityState = props => {

    const initialState = {
        activities: [
            {
                id: 1,
                activity_description: "a desc",
                activity_name: "a",
            },
            {
                id: 2,
                activity_description: "b desc",
                activity_name: "b",
            },
            {
                id: 3,
                activity_description: "c desc",
                activity_name: "c",
            }
        ]
    };

    const [state, dispatch] = useReducer(ActivityReducer, initialState);

    const deleteActivity = id => {
        dispatch({ type: DELETE_ACTIVITY, payload: id });
    };

    const setCurrentActivity = activity => {
        dispatch({ type: SET_CURRENT_ACTIVITY, payload: activity });
    };

    return ( 
        <ActivityContext.Provider 
            value={{
                    activities: state.activities, 
                    deleteActivity,
                    setCurrentActivity
                }}>
           { props.children }
        </ActivityContext.Provider>
    );
}

export default ActivityState;

活动上下文.js

import { createContext } from "react";

const ActivityContext = createContext(null);

export default ActivityContext;

ActivityReducer.js

import { DELETE_ACTIVITY, SET_CURRENT_ACTIVITY } from '../types';

  export default (state, action) => {
    switch (action.type) {
      case DELETE_ACTIVITY:
        return {
          ...state,
          activities: state.activities.filter(
            activity => activity.id !== action.payload
          )
        };
      case SET_CURRENT_ACTIVITY:
        return {
          ...state,
          current: action.payload
        };
      default:
        return state;
    }
  };

活动视图.js

import React, { useContext } from "react";

import ActivityContext from '../../context/activities/ActivityContext';

import ActivityTable from './ActivityTable';

const Activities = () => {
    const activityContext = useContext(ActivityContext);

    const { activities } = activityContext;

    console.log('activities: ', activities);

    return (
        <div>
           <ActivityTable/>
        </div>
    );
}

export default Activities;

活动表.js

import React, { useContext, useState } from "react";
import ActivityContext from "../../context/activities/ActivityContext";

const ActivityTable = ({ activity }) => { //activity is undefined here
    const activityContext = useContext(ActivityContext);

    const { activities } = activityContext;

    const { id, activity_name, activity_desc } = activity; //undefined

    return (
        <div>
            <tr>
                <td>{id}</td>
                <td>{activity_name}</td>
                <td>{activity_desc}</td>
            </tr>
        </div>
    );
};

export default ActivityTable;