无法访问React Redux中的一个对象键其他所有键都可以

如何解决无法访问React Redux中的一个对象键其他所有键都可以

在React Redux应用程序中，我有一个名为ItemDetail的组件，该组件当然应该根据URL参数id呈现与其检索到的物品有关的所有细节。

import React,{ useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux'
import * as actions from '../../../../../actions'

const ItemDetail = (props) => {
    const mapState = (state) => {
        return {
            currentItem: state.currentItem,}
    }

    const dispatch = useDispatch()
    const { currentItem } = useSelector(mapState)



    useEffect(() => {
        let { id } = props.match.params
        dispatch(actions.fetchCurrentItem(id))
        dispatch(actions.setAside(false))
        return () => dispatch(actions.setAside(true))
    },[dispatch,props.match.params])



    return (

        <div id="item-detail">
            <div id="picture">picture {currentItem.image}</div>
            <div id="details">details {currentItem.name} {currentItem.rating[1]}</div>
        </div>
    );
}

export default ItemDetail;

Item对象看起来像这样：

{
      "id": 1,"name": "Dell XPS 13","value": "dell-xps-13","category": 2,"department": 2,"price": 1599.0,"discount": 0,"image": "xps13_9370_4_3_01.jpg","rating": {
        "1": 1,"2": 0,"3": 8,"4": 12,"5": 21
      },"sold": 520,"left": 34,"features": [
        "10th Generation Intel® Core™ i7-1065G7 Processor","6.8% larger 16:10 display - 13 inches,17% larger touchpad and an edge-to-edge backlit keyboard with larger key caps","6% thinner design with more power","long battery life —up to 18 hours,49 minutes* on a Full HD+ model when using when using productivity applications like Word or Excel or up to 11 hours,51 minutes* when streaming Netflix"
      ]
}

现在，我可以访问除“评级”之外的每个键。实际上，当我尝试访问{currentItem.rating [1]}时，出现以下错误TypeError: Cannot read property '1' of undefined。看起来好像该对象是未定义的，但是如果我仅尝试访问{currentItem.rating}而未指定键值，则会得到预期的Error: Objects are not valid as a React child (found: object with keys {1,2,3,4,5}). If you meant to render a collection of children,use an array instead.。

那么，当我尝试访问任何其他值，或者只是找到rating对象时却怎么回事，但是当我尝试访问对象键（在这种情况下为“ 1”）时，对象却未定义呢？

感谢您的回复。

编辑

我感觉到问题出在我的减速器上。以防万一，在这里。

import * as actions from './../actions'

const initState = {
    loading: false,categories: [],currentCategory: {
        "id": 1,"value": "any","name": "--- Any ---","departments": []
    },currentDepartment: {
        "id": 0,},toggler: 'hidden',error: '',minimumPrice: 0,maximumPrice: 5000,items: [],valueSearched: '',currentItem: {},aside: true
}

const rootReducer = (state = initState,action) => {
    switch (action.type) {
        case actions.SET_CATEGORY:
            return {
                ...state,currentCategory: action.payload.category,departments: action.payload.departments,currentDepartment: {
                    "id": 0,}
            }
        case actions.FETCH_CATEGORIES_REQUEST:
            return { ...state,loading: true }
        case actions.FETCH_CATEGORIES_SUCCESS:
            return { ...state,loading: false,categories: action.payload }
        case actions.FETCH_CATEGORIES_FAILURE:
            return { ...state,categories: action.payload }
        case actions.SET_DEPARTMENT:
            return { ...state,currentDepartment: action.payload }
        case actions.TOGGLE:
            return { ...state,toggler: action.payload }
        case actions.ASIDE:
            return { ...state,aside: action.payload }
        case actions.SET_MINIMUM_PRICE:
            return { ...state,minimumPrice: action.payload }
        case actions.SET_MAXIMUM_PRICE:
            return { ...state,maximumPrice: action.payload }
        case actions.FETCH_ITEMS_REQUEST:
            return { ...state,loading: true }
        case actions.FETCH_ITEMS_SUCCESS:
            return { ...state,items: action.payload }
        case actions.FETCH_ITEMS_FAILURE:
            return { ...state,items: action.payload }
        case actions.SET_VALUE_SEARCHED:
            return { ...state,valueSearched: action.payload }
        case actions.FETCH_CURRENT_ITEM_REQUEST:
            return { ...state,loading: true }
        case actions.FETCH_CURRENT_ITEM_SUCCESS:
            return { ...state,currentItem: action.payload,aside: false }
        case actions.FETCH_CURRENT_ITEM_FAILURE:
            return { ...state,currentItem: action.payload }
        default:
            return state
    }
}

export default rootReducer

解决方法

您可以这样访问它：

{currentItem.rating["1"]}

因为您的对象具有“字符串”顺序

更新： 检查此代码。它不完全是您的，但我认为它可以帮助您解决问题。

<div id="details">raiting {Object.values(item.rating).join(",")} </div>

https://codesandbox.io/s/fancy-field-j5j61?file=/src/MyComp.js

,

好的，经过研究，我找到了解决方案。

基本上我的问题是this的重复项。

在我的情况下，我只需要将currentItem: null设置在减速器内的初始状态，然后在组件return内检查currentItem是否不是null，如果是这样，我就继续渲染整个组件。