使用Redux触发TypeError：无法读取undefined的items属性

我尝试使用useSelector()从Redux store中获取状态，却出现以下错误：

AddToCart.jsx:7 Uncaught TypeError: Cannot read properties of undefined (reading 'items')
    at AddToCart.jsx:7:58
    at react-redux.js?v=afc4f5cf:189:28
    at memoizedSelector (react-redux.js?v=afc4f5cf:46:38)
    at getSnapshotWithSelector (react-redux.js?v=afc4f5cf:74:22)
    at mountSyncExternalStore (react-dom_client.js?v=afc4f5cf:11886:28)
    at Object.useSyncExternalStore (react-dom_client.js?v=afc4f5cf:12573:22)
    at useSyncExternalStore (chunk-4HAMFFQC.js?v=afc4f5cf:1120:29)
    at useSyncExternalStoreWithSelector3 (react-redux.js?v=afc4f5cf:81:23)
    at useSelector2 (react-redux.js?v=afc4f5cf:243:27)
    at AddToCart (AddToCart.jsx:7:19)

相关代码 #

store.js #

import { configureStore } from '@reduxjs/toolkit';
import itemcountSliceReducer from './itemcountSlice'

const store = configureStore({
  reducer: {
    itemcountSliceReducer,
  }
})

export default store;

itemcountSlice.js #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: {
    1: 0,
    2: 0,
    3: 0,
    4: 0,
    5: 0,
    6: 0,
    7: 0,
    8: 0,
    9: 0,
  },
  totalAmount: 0,
}

const itemcountSlice = createSlice({
  name: "itemcount",
  initialState,
  reducers: {
    addItem: (state, action) => {
      state.items = {
        ...state.items, 
        [action.payload.id]: state.items[action.payload.id] + 1
      }
    },
    rmvItem: (state, action) => {
      state.items = {
        ...state.items, 
        [action.payload.id]: state.items[action.payload.id] - 1
      }
    }
  }
})

export const { addItem, rmvItem } = itemcountSlice.actions;
export default itemcountSlice.reducer;

AddToCart.jsx #

import React from 'react'
import { useSelector,useDispatch } from 'react-redux'
import {addItem} from '../store/itemcountSlice'

const AddToCart = ({ id }) => { 
  const count = useSelector((state) => state.itemcount.items[id])
  const dispatch = useDispatch()

  return (
    <button onClick={(e) => dispatch(addItem(id))}>
      <img
        src = '../../assets/images/icon-add-to-cart.svg'
        alt = 'add to cart'
      />
      <span>Add to Cart</span>
    </button>
  )
}

export default AddToCart

App.jsx #

import { useState, useEffect } from 'react'
import './App.css'
import cardsData from '../data.json'
import Card from './components/Card'

function App() {
  const data = cardsData.map((item, i) => (
    { ...item, id: i + 1 }
  ))

  return (
    <div className='main-container'>
      <div className='left-container'>
        <h1>Desserts</h1>
        <div className='cards-container' >
          {data.map((item) => 
            (<Card image = {item.image.desktop}
                category = {item.category}
                name = {item.name}
                price = {item.price} 
                key = {item.id} 
                id = {item.id}           
            />))}
        </div>
      </div>
      <div className='right-container'></div>
    </div>
  )
}

export default App

我的App组件已用Provider标签包裹，不确定问题根源，想请教是useSelector的语法有误，还是reducer添加到store的方式不正确？

问题根源及修复方案 #

1. Store中Reducer键名不匹配 #

在store.js里，你给reducer设置的键是itemcountSliceReducer，但在AddToCart.jsx的useSelector里尝试访问state.itemcount，这直接导致state.itemcount为undefined，进而无法读取items属性，触发报错。

修复：修改store.js的reducer键名为itemcount，和slice名称对应：

// store.js
const store = configureStore({
  reducer: {
    itemcount: itemcountSliceReducer,
  }
})

2. Dispatch传参格式错误 #

在AddToCart.jsx中，你直接传入id到addItem action，但slice的reducer里期望读取action.payload.id——此时action.payload就是id数值，并非包含id的对象，后续修改状态时会引发新的错误。

修复：修改dispatch传参为包含id的对象：

// AddToCart.jsx
<button onClick={(e) => dispatch(addItem({ id }))}>

可选优化 #

为避免后续类似的属性读取报错，可在useSelector中添加可选链和默认值：

const count = useSelector((state) => state.itemcount?.items?.[id] || 0)

内容的提问来源于stack exchange，提问作者Aviral Mehrotra