我试图在ReactJS中渲染我的HOC函数,但它给了我一个错误。这里有几个片段(我已经删除了无关的空间和清晰度的东西):
在我的app.js
组件中,我正在导入我的HOC:
import React, { Component } from "react";
import "./App.css";
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
import Home from "../Home/Home";
import StoriesHOC from "../Story/GetAllStories/Stories";
export default class App extends Component {
render() {
return (
<Router>
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route
path="/all_stories"
render={() => {
return <StoriesHOC />;
}}
/>
</Switch>
</div>
</Router>
);
}
}
然后进入<StoriesHOC />
:
import React from "react";
import StoryShow from "../StoryShow/StoryShow";
import { Query, Fetching, Error } from "react-apollo";
import { getStories } from "../../Queries/Queries";
function Stories({ stories, getStoriesQuery }) {
return (
<div>
<div className="stories_header">
<h2>All Stories</h2>
</div>
<div className="stories-container">
{stories.map(story => (
<StoryShow
key={story.id}
story={story}
getStoriesQuery={getStoriesQuery}
/>
))}
</div>
</div>
);
}
export default function StoriesHOC(props) {
return (
<Query query={getStories}>
{({ loading, error, data }) => {
console.log(data)
if (error) return <Error />
if (loading || !data) return <Fetching />
return <Stories
{...props}
getStoriesQuery={getStories}
stories={(data && data.stories) || []}/> }}
</Query>
);
}
编辑:这是StoryShow组件,因为它也被导出为默认函数。
import React from "react";
import { Link } from 'react-router-dom'
export default function StoryShow({
story: {id, title, author, tagline, summary} = {}
}) {
return (
<div>
<h1>{title}</h1>
<h2>{tagline}</h2>
<h3>{author}</h3>
<p>{summary}</p>
<Link exact to={'/story/' + id}>Read More</Link>
</div>
)
}
实际的GraphQL查询,import { getStories } from "../../Queries/Queries";
正在另一个文件中执行,格式如下:
import gql from "graphql-tag";
export const getStories = gql`
query getStories {
stories {
id
title
author
tagline
}
}
`;
但是,Chrome浏览器中显示的实际错误是:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of `StoriesHOC`.
它后来给出了它停止的位置,这是前面在StoriesHOC函数中看到的<Query query={getStories}>
。话虽这么说,似乎我的问题仅仅源于这条线,但是虽然我已经成为解决问题的全体董事,但我最好的猜测只是我在GraphQL查询中做错了,但是当我在后端检查IDE时,它呈现完美。
还有一个问题是试图弄清楚我是否在我的app.js文件中正确导出了导入的函数,但我知道因为我使用export default function myFunc
导出它应该导入为当前状态。
任何帮助将不胜感激,以及建议或批评。先感谢您!
如果组件带有剥离的代码/内容
export default function StoriesHOC(props) {
return (
<Query query={getStories}>
{({ data }) => {
console.log(data)
return <div>fake content</div>
}
</Query>
)
}
正确渲染然后查询是正常的,问题是删除部分。逐个恢复它们以找到/隔离真正的问题根源。
我发现了我的问题,这是一个过时的npm安装为react-apollo, graphql-tag, and apollo-boost.
这听起来很明显,这应该是我看到的第一个地方,但我刚刚在两周前更新了它们!
对于路过的人来说,这是一个适用于我的包版本的片段:
"dependencies": {
"apollo-boost": "^0.1.15",
"cors": "^2.8.4",
"express": "^4.16.3",
"graphql": "^0.13.2",
"graphql-server-express": "^1.4.0",
"graphql-tag": "^2.9.2",
"react": "^16.5.0",
"react-apollo": "^2.1.11",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"
}