为什么我不能在一个对象中映射这个对象数组答案

【问题标题】：Why can't i map this array of objects within an object为什么我不能在一个对象中映射这个对象数组
【发布时间】：2022-01-12 04:50:27
【问题描述】：

大家好，我一直在使用 next.js、redux 和 sanity.io。这太糟糕了......大声笑

无论如何，这是我坚持的代码

ServiceCards.js 

import React from 'react';
import { useSelector } from 'react-redux';
import { getNavItems } from '../redux/actions/navItems';

const ServicesCards = () => {
  const services = useSelector((state) => state.services.services);

console.log(services)

  return (
    <>
    {Object.keys(services).map((item) => {

   

return(
  <h2>{item}</h2>
)



     
  
    })}
   
    </>
  );
};
export default ServicesCards;

如您所见，我正在完美地连接到 redux 存储，并且数据已被重新调整，如下所示：

{0: {…}, 1: {…}, 2: {…}}
0:
body: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
locations: [{…}]
mainImage: {_type: 'image', asset: {…}}
slug: {_type: 'slug', current: 'patios'}
title: "Patios"
_id: "70f4ad81-f8eb-414a-8e76-da8bf98cc4de"
[[Prototype]]: Object
1: {_id: 'cc9548aa-ccf5-4688-a6ac-3b1a41f9896d', body: Array(10), locations: Array(1), mainImage: {…}, slug: {…}, …}
2:
body: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
locations: [{…}]
mainImage: {_type: 'image', asset: {…}}
slug:
current: "tree-removal"
_type: "slug"
[[Prototype]]: Object
title: "Tree Removal"
_id: "f63a0092-4b89-4ea9-9e49-f618d5f5f0b9"
[[Prototype]]: Object
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

所以我得到的数据结构是

{
0:{...},
1: {...},
2:{...}

}

通常我只是使用 Object.keys 来映射对象，我使用它没有任何问题，为什么它在这里不起作用？

仔细看看 Object.keys

return (
    <>
      {Object.keys(services).map((item) => {
        return <h2>{item}</h2>;
      })}
    </>
  );

这就是我从渲染中得到的结果

0
1
2

根本没有数据。

store.js

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import { createWrapper } from 'next-redux-wrapper';
import reducer from './reducers/pages';

const middleware = [thunkMiddleware];

const initialState = {
  pages: {},
  navItems: {},
  services: []
};

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

const initStore = () => {
  return store;
};

const wrapper = createWrapper(initStore, { debug: true });

export default wrapper;

我必须在 next-redux-wrapper 中设置 initialState 才能让它工作，不要问我为什么......我希望我会留在 Gatsby.js。

我真的可以帮助别人，因为它让我发疯，我敢打赌它是如此简单！

【问题讨论】：

Object.keys 返回一个键数组，而不是值。它应该是这样的{Object.keys(services).map((key) => { const item = services[key]; return <h2>{item}</h2>; })}
成功了，我爱你！！！！！！
很高兴它有帮助！将其添加为答案，以便其他人轻松找到

标签： javascript reactjs next.js sanity next-redux-wrapper

【解决方案1】：

您可以改用Object.values：

Object.values(services).map((item) => (
  <h2>{item}</h2>
))

【讨论】：

【解决方案2】：

Object.keys 返回一个键数组，而不是值。应该是这样的

{Object.keys(services).map((key) => { 
    const item = services[key];
    return <h2>{item}</h2>;       
})}

【讨论】：