javascript - 使用 Context API 在函数组件中未定义 React 状态属性

Question

我对 React 的上下文 API 和函数组件的 Hook 很陌生。我正在尝试将状态传递给子组件 ActivityTable.js。我将提供程序封装在应用程序 (App.js) 周围，但是 ActivityTable.js 中的状态属性仍未定义 - TypeError: Cannot read property 'id'未定义的。

任何指导将不胜感激。

<小时/>

App.js

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

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

export default App;

ActivityState.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;

ActivityContext.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;
    }
  };

ActivityView.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;

ActivityTable.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;

Answer 1

看起来您正在使用 activity 作为 ActivityTable 内的 Prop ，但从未真正提供该 Prop 。

<ActivityTable activity={foo} />

我无法判断您要传递到表中的数据。您在两个组件中都成功导入了上下文，但从未使用上下文数据。