我正在尝试对保存在服务器上的数组发出客户端请求,通过传递 React 道具来传递数据。但是我收到错误
警告:失败的 propType:
children
提供给的 prop 无效App
,需要一个 ReactElement。
你能帮我告诉我什么时候会收到这个错误吗?
我在路由中定义了 propType:
Home.propTypes = {
home: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string,
})).isRequired,
};
然后异步操作函数请求数据并等待响应。
async action() {
const resp = await fetch('/graphql', {
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: '{home{title}}',
}),
credentials: 'include',
});
const { data } = await resp.json();
if (!data || !data.home) throw new Error('Failed to load the news feed.');
return <Home {...data} />;
HomeItemType 定义:
import {
GraphQLObjectType as ObjectType,
GraphQLString as StringType,
GraphQLNonNull as NonNull,
} from 'graphql';
const HomeItemType = new ObjectType({
name: 'HomeItem',
fields: {
id: { type: StringType },
name: { type: StringType },
}
});
服务器上的数据查询(现在尽可能简单):
import HomeItemType from '../types/HomeItemType';
var data = require('./home.json')
let items = [];
const home = {
type: new List(HomeItemType),
resolve() {
items = JSON.parse(data);
return items;
}
}
export default home;