ReactDOM 期待 String 但返回一个 Object
ReactDOM expecting String but returning an Object
我是 运行 一个使用 React 和 Graphql 的应用程序。我收到以下错误:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
当运行如下代码时:
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import Routes from './routes';
import registerServiceWorker from './registerServiceWorker';
const client = new ApolloClient({
link: new HttpLink({ uri: 'http://localhost:8080' }),
cache: new InMemoryCache(),
});
const App = (
<ApolloProvider client={client}>
<Routes />
</ApolloProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
我在包含 ReactDOM.render();
的行中收到错误,因为它返回的是对象而不是字符串。我不明白为什么它请求一个字符串并返回一个对象。
在我的路由目录中:
index.js:
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
export default () => (
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
</Switch>
</BrowserRouter>
);
和Home.js
import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
const Home = ({ data: { loading, allUsers } }) =>
(loading ? null : allUsers.map(u => <h1 key={u.id}>{u.email}</h1>));
const allUsersQuery = gql`
{
allUsers {
id
email
}
}
`;
export default graphql(allUsersQuery)(Home);
我不知道确切的原因,也许有人可以插话,但你不能像这样拥有你的组件:
const App = (
<ApolloProvider client={client}>
<Routes />
</ApolloProvider>
);
如果你使用ReactDOM.render(<App />, ...)
如果您将其更改为如下功能组件,它应该可以工作:
const App = () => (
<ApolloProvider client={client}>
<Routes />
</ApolloProvider>
);
但是,您也可以只执行 ReactDOM.render(App, ...)
而无需将其更改为函数。
我是 运行 一个使用 React 和 Graphql 的应用程序。我收到以下错误:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
当运行如下代码时:
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import Routes from './routes';
import registerServiceWorker from './registerServiceWorker';
const client = new ApolloClient({
link: new HttpLink({ uri: 'http://localhost:8080' }),
cache: new InMemoryCache(),
});
const App = (
<ApolloProvider client={client}>
<Routes />
</ApolloProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
我在包含 ReactDOM.render();
的行中收到错误,因为它返回的是对象而不是字符串。我不明白为什么它请求一个字符串并返回一个对象。
在我的路由目录中:
index.js:
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
export default () => (
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
</Switch>
</BrowserRouter>
);
和Home.js
import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
const Home = ({ data: { loading, allUsers } }) =>
(loading ? null : allUsers.map(u => <h1 key={u.id}>{u.email}</h1>));
const allUsersQuery = gql`
{
allUsers {
id
email
}
}
`;
export default graphql(allUsersQuery)(Home);
我不知道确切的原因,也许有人可以插话,但你不能像这样拥有你的组件:
const App = (
<ApolloProvider client={client}>
<Routes />
</ApolloProvider>
);
如果你使用ReactDOM.render(<App />, ...)
如果您将其更改为如下功能组件,它应该可以工作:
const App = () => (
<ApolloProvider client={client}>
<Routes />
</ApolloProvider>
);
但是,您也可以只执行 ReactDOM.render(App, ...)
而无需将其更改为函数。