[英]ReactJS/Javascript/Graphql/React-apollo: Cannot read property 'loading' of undefined
[英]Cannot read property 'map' of undefined (ReactJS-Apollo-Graphql)
我正在尝试使用 React JS 创建一个虚拟项目,并且我从 SpaceX Graphql API 获取我的数据。 我有两个组件(主页、详细信息),并且这两个组件都应该从 API 获取数据。 但是,我查询在 Home 组件中有效,但在 Details 组件中无效。 我使用了完全相同的方法,但似乎不起作用。 请帮我解决这个问题。
如果需要,您可以在https://github.com/affiqzaini/react-apollo-spacex 上尝试整个过程。
这是我的 Home 组件,它可以工作:
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;
这是我得到的错误:错误图像
更新:我发现我在两个查询中得到了不同类型的数据。 在 Home(有效)中,我得到了一组数据。 在我的详细信息组件中,我得到了一个对象。 这就是我不能使用地图功能的原因吗?
根据查询文档https://www.apollographql.com/docs/react/v2.5/essentials/queries/在此之后您不需要使用“else”:
if (loading) return <p className='Loading'>Loading...</p>;
而且你不会在你的 Home 组件中这样做。 尝试在“详细信息”组件中也删除“else”:
<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>
如果要映射的返回数据仍为对象形式,则需要将对象转换为数组。
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>
));
我发现我得到的数据是对象形式而不是数组。 要访问该对象,您可以使用上面 DrewReese 的方法或我发现更简单的这种方式:
*** 'rocket' 是我的对象的名称
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.