[英]Why can't i map this array of objects within an object
嗨,伙計們,我一直在與 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 到 map 對象,我使用它沒有問題,那為什么它在這里不起作用?
仔細查看 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.values
代替:
Object.values(services).map((item) => (
<h2>{item}</h2>
))
Object.keys
返回一個鍵數組,而不是值。 它應該是這樣的
{Object.keys(services).map((key) => {
const item = services[key];
return <h2>{item}</h2>;
})}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.