无法读取未定义的属性“map”(ReactJS-阿波罗-Graphql)
我正在尝试创建一个带有React的虚拟项目，我从SpaceX Graphql中获取数据。我有两个组件(Home，Details)，这两个组件都应该从API获取数据。但是，我查询在Home组件中工作，但它在Details组件中不工作。我使用了完全相同的方法，但似乎不起作用。帮我解决这个问题。
如果你愿意的话，你可以在https://github.com/affiqzaini/react-apollo-spacex试一试。
这里是我的家庭组件，它可以工作：
import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
import { BrowserRouter, NavLink } from 'react-router-dom';
import Route from 'react-router-dom/Route';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import './App.css';
import Details from './Details';
const POSTS_QUERY = gql`
{
rockets {
name
country
id
}
}
`;
function Home() {
return (
<BrowserRouter>
<Route
path='/'
exact
strict
render={() => {
return (
<div
className='tile is-ancestor'
style={{
justifyContent: 'space-evenly',
alignItems: 'center',
margin: 25
}}
>
<Query query={POSTS_QUERY}>
{({ loading, data }) => {
if (loading) return <p className='Loading'>Loading...</p>;
const { rockets } = data;
return rockets.map(post => (
<NavLink to={{ pathname: `/${post.id}` }}>
<div class='tile is-parent'>
<article
class='tile is-child box'
key={post.id}
style={{
backgroundColor: 'whitesmoke',
borderRadius: 10,
height: 400,
width: 300
}}
>
<figure
class='image container is-1by1'
style={{ marginBottom: 15 }}
>
<img
src={require(`./Images/${post.id.toString()}.jpg`)}
className='Rocket-Img'
alt='Rocket'
/>
</figure>
<h2>{post.name}</h2>
<h4>{post.country}</h4>
</article>
</div>
</NavLink>
));
}}
</Query>
</div>
);
}}
/>
<Route path='/:id' exact strict component={Details} />
</BrowserRouter>
);
}
export default Home;以下是无法工作的详细信息组件：
import React from 'react';
import { useParams } from 'react-router';
import { Query, ApolloProvider } from 'react-apollo';
import gql from 'graphql-tag';
import ApolloClient from 'apollo-boost';
import './App.css';
function Details() {
const rocketId = useParams();
const QUERY_ROCKET = gql`
{
rocket(id: "${rocketId}") {
id
active
boosters
company
cost_per_launch
name
stages
success_rate_pct
type
wikipedia
first_flight
country
description
}
}
`;
return (
<Query query={QUERY_ROCKET}>
{({ loading, data }) => {
if (loading) {
return <p className='Loading'>Loading...</p>;
} else {
const { detailsData } = data;
return detailsData.map(post => (
<div>
<p>{post.id}</p>
</div>
));
}
}}
</Query>
);
}
export default Details;下面是我得到的错误：误差图像
更新:我发现我在这两个查询中得到了不同类型的数据。在家里(这很管用)，我得到一个数据数组。在我的细节组件中，我得到了一个对象。这就是为什么我不能使用地图功能吗？
回答 3
Stack Overflow用户
发布于 2020-03-26 15:15:08
如果要映射的返回数据仍为对象形式，则需要将对象转换为数组。
Object.values(data.detailsData)只获取值的数组，或Object.entries(data.detailsData)获取键值对的数组，即[[key1, value1], [key2, value2], ...[keyN, valueN]]。
Object.values()方法返回给定对象自身可枚举属性值的数组，其顺序与for...in循环提供的顺序相同。
Object.entries()方法返回给定对象自己的可枚举字符串键控属性[key, value]对的数组，其顺序与for...in循环提供的顺序相同。
return Object.values(detailsData).map(post => (
<div>
<p>{post.id}</p>
</div>
));Stack Overflow用户
发布于 2020-03-26 08:12:12
根据查询文档https://www.apollographql.com/docs/react/v2.5/essentials/queries/，您不需要在此之后使用“after”：
if (loading) return <p className='Loading'>Loading...</p>;你不能在你的家庭组件中这样做，这是可行的。在Details组件中也尝试删除“Details”：
<Query query={QUERY_ROCKET}>
{({ loading, data }) => {
if (loading) return <p className='Loading'>Loading...</p>;
const { detailsData } = data;
return detailsData.map(post => (
<div>
<p>{post.id}</p>
</div>
));
}}
</Query>Stack Overflow用户
发布于 2020-03-26 15:43:14
我发现我得到的数据是一个对象形式，而不是一个数组。要访问对象，可以使用上面的DrewReese方法，也可以使用我认为更简单的方法：
*‘火箭’是我的目标的名字
return (
<Query query={QUERY_ROCKET}>
{({ loading, error, data }) => {
if (loading) return <p className='Loading'>Loading...</p>;
if (error) return `Error! ${error.message}`;
const detailsData = data.rocket;
return (
<div>
<p>{detailsData.id}</p>
<p>{detailsData.name}</p>
<p>{detailsData.company}</p>
<p>{detailsData.stages}</p>
<p>{detailsData.boosters}</p>
<p>{detailsData.cost_per_launch}</p>
</div>
);
}}
</Query>https://stackoverflow.com/questions/60861832
复制相似问题
腾讯云开发者
