Reactjs MapStateTops之后，道具仍然为空

我在一个mern stack应用程序中工作，当我试图将状态传递给特定组件的道具时，会出现错误

我得到一个错误：

TypeError: Cannot read property 'items' of undefined

D:/Mohammed/project/mern-app/client/src/components/ShoppingList.js:19
  16 |        this.props.deleteItem(id);
  17 |    }
  18 | 
> 19 |    render() {
     | ^  20 |        const { items } = this.props.item;
  21 |    return (
  22 |      <div>

下面是mern app/client/src/actions/itemActions.js

import { GET_ITEMS, ADD_ITEM, DELETE_ITEM } from './types';

export const getItems =  () => {
    return {
        type: GET_ITEMS
    };
};

export const deleteItem =  (id) => {
    return {
        type: DELETE_ITEM,
        payload: id
    };
};

下面是mern app/client/src/actions/types.js

export const GET_ITEMS = 'GET_ITEMS';
export const ADD_ITEM = 'ADD_ITEM';
export const DELETE_ITEM = 'DELETE_ITEM';

下面是mern-app/client/src/reducers/index.js

import { combineReducers } from 'redux';
import itemReducer from './itemReducer';

export default combineReducers({
    item: itemReducer
});

最后是mern app/client/src/reducers/itemrucer.js

import uuid from 'uuid';
import { GET_ITEMS, ADD_ITEM, DELETE_ITEM } from '../actions/types';

const initialState = {
    items: [
        {id: uuid(), name: 'ali'},
        {id: uuid(), name: 'amgad'},
        {id: uuid(), name: 'nour'},
    ]
};

export default function(state = initialState, action) {
    switch(action.type) {
        case GET_ITEMS:
            return {
                ...state
            }
        case DELETE_ITEM:
            return {
                ...state,
                items: state.items.filter(item => item.id !== action.payload)
            }
        default:
            return state;
    }
}

---

连接的组件导入和导出不匹配

在

ShoppingList.js

中，您有：

//命名导出
导出类ShoppingList扩展组件{}
//默认导出
导出默认连接（mapStateToProps，{getItems，deleteItem}）（ShoppingList）；

在

App.js

中，您有：

//命名导入
从“./components/ShoppingList”导入{ShoppingList}；

因此，您正在导入未连接版本的

ShoppingList

并使用它

将其更改为默认导入，以便获得组件的连接版本，并且它应该可以工作：

从“./components/ShoppingList”导入ShoppingList；

是的，它很管用！非常感谢@markerikson对您的帮助。

export const GET_ITEMS = 'GET_ITEMS';
export const ADD_ITEM = 'ADD_ITEM';
export const DELETE_ITEM = 'DELETE_ITEM';

import { combineReducers } from 'redux';
import itemReducer from './itemReducer';

export default combineReducers({
    item: itemReducer
});

import uuid from 'uuid';
import { GET_ITEMS, ADD_ITEM, DELETE_ITEM } from '../actions/types';

const initialState = {
    items: [
        {id: uuid(), name: 'ali'},
        {id: uuid(), name: 'amgad'},
        {id: uuid(), name: 'nour'},
    ]
};

export default function(state = initialState, action) {
    switch(action.type) {
        case GET_ITEMS:
            return {
                ...state
            }
        case DELETE_ITEM:
            return {
                ...state,
                items: state.items.filter(item => item.id !== action.payload)
            }
        default:
            return state;
    }
}