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

Question

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

如有任何指导，我们将不胜感激。

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 中的道具，但实际上从未提供过该道具。

<ActivityTable activity={foo} />

我无法判断您要向 table 传递什么数据。您正在两个组件中成功导入上下文，但从未使用上下文数据。

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

React state property undefined in function component using Context API

javascript

reactjs

react-context

react-state-management

react-hooks

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

React state property undefined in function component using Context API

javascript

reactjs

react-context

react-state-management

react-hooks

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