Question

我是React的上下文API的新手，是函数组件的钩子。我正在尝试将状态传递给子组件 ActivityTable.js 。我将提供程序包装在应用程序（ App.js ）周围，但是状态属性在 ActivityTable.js 中仍未定义- TypeError：无法读取属性'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 activity={foo} />

我无法告诉您您要传递给表的数据是什么。您正在两个组件中成功导入了上下文，但是从不使用上下文数据。

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

1 个答案: