Question

我正在使用React和Graphql运行应用程序。我收到以下错误：

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();

我在包含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> );的行上收到错误，因为它返回的是对象而不是字符串。我不明白为什么它要求一个String并返回一个对象。

在路线目录中我有：

index.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);

和Home.js

internal class ClientMessageInspector : IEndpointBehavior, IClientMessageInspector
{
    public void Validate(ServiceEndpoint endpoint)
    {
    }

    public void AddBindingParameters(ServiceEndpoint endpoint, BindingParameterCollection bindingParameters)
    {
    }

    public void ApplyDispatchBehavior(ServiceEndpoint endpoint, EndpointDispatcher endpointDispatcher)
    {
        //throw new Exception("Exception in ApplyDispatchBehavior : ");
    }

    public void ApplyClientBehavior(ServiceEndpoint endpoint, ClientRuntime clientRuntime)
    {
        //throw new Exception("Exception in ApplyClientBehavior : ");
        clientRuntime.ClientMessageInspectors.Add(this);
    }

    public object BeforeSendRequest(ref Message request, IClientChannel channel)
    {
        //throw new Exception("Exception in BeforeSendRequest : " + request.Headers.MessageId);
        var message = request;
        request = new MyCustomMessage(message);
        return null;
    }

    public class MyCustomMessage : Message
    {
        private readonly Message _message;

        public MyCustomMessage(Message message)
        {
            this._message = message;
        }

        protected override void OnWriteBodyContents(System.Xml.XmlDictionaryWriter writer)
        {
            MethodInfo dynMethod = _message.GetType().GetMethod("OnWriteBodyContents", BindingFlags.NonPublic | BindingFlags.Instance);
            dynMethod.Invoke(_message, new object[] { writer });
        }

        public override MessageHeaders Headers
        {
            get
            {
                // Remove wsa:To header
                var index = this._message.Headers.FindHeader("To", "http://www.w3.org/2005/08/addressing");
                if (index > 0)
                {
                    this._message.Headers.RemoveAt(index);
                }

                // Remove wsa:ReplyTo header
                index = this._message.Headers.FindHeader("ReplyTo", "http://www.w3.org/2005/08/addressing");
                if (index > 0)
                {
                    this._message.Headers.RemoveAt(index);
                }

                // Remove VsDebuggerCausalityData (only appears in Dev but here from convenience)
                index = this._message.Headers.FindHeader("VsDebuggerCausalityData", "http://schemas.microsoft.com/vstudio/diagnostics/servicemodelsink");
                if (index > 0)
                {
                    this._message.Headers.RemoveAt(index);
                }

                return this._message.Headers;
            }
        }

        public override MessageProperties Properties
        {
            get { return this._message.Properties; }
        }

        public override MessageVersion Version
        {
            get { return this._message.Version; }
        }

    }

    public void AfterReceiveReply(ref Message reply, object correlationState)
    {
        //throw new Exception("Exception in AfterReceiveReply : ");
    }
}

Answer 1

我不知道确切的原因，也许有人可以插话，但你不能拥有这样的组件：

const App = (
  <ApolloProvider client={client}>
     <Routes />
  </ApolloProvider>
);

如果您使用ReactDOM.render(<App />, ...)

如果按如下所示将其更改为功能组件，则应该有效：

const App = () => (
  <ApolloProvider client={client}>
     <Routes />
  </ApolloProvider>
);

但是，您也可以在不将其更改为函数的情况下执行ReactDOM.render(App, ...)。

ReactDOM期待String但返回一个Object

1 个答案: