使用 Context API 在函数组件中反应未定义的状态属性

Posted 2023-04-14

【中文标题】使用 Context API 在函数组件中反应未定义的状态属性

【英文标题】：React state property undefined in function component using Context API

【发布时间】：2020-02-06 05:37:19

【问题描述】：

我不熟悉 React 的上下文 API 和函数组件的钩子。我正在尝试将状态传递给子组件 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;

【参考方案1】：

看起来您在 ActivityTable 中使用 activity 作为道具，但实际上从未提供过该道具。

<ActivityTable activity=foo />

我不知道您要向表传递什么数据。您在两个组件中都成功导入了上下文，但从不使用上下文数据。