Question

我有一个React应用程序的简单演示，用于显示简单的食谱列表

我已经全部工作了，但是突然停了下来，我正在使用控制台

TypeError: Cannot read property 'map' of undefined

一切都在操场上进行，所以我认为这一定是React方面的事情

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloProviderHooks } from 'react-apollo-hooks'

const cache = new InMemoryCache()
const link = new HttpLink({
  uri: 'http://locahost:4000'
})

const client = new ApolloClient({
  cache,
  link
})

const Root = () => (
  <Router>
    <Switch>
      <Route path='/' component={App} />
      <Redirect to='/' />
    </Switch>
  </Router>
)


ReactDOM.render(
  <ApolloProvider client={client}>
    <ApolloProviderHooks client={client}>
      <Root />
    </ApolloProviderHooks>
  </ApolloProvider>
  , document.getElementById('root'));

queries / index.tsx

export const GET_ALL_RECIPES = gql`
  query RecipeData{
    recipe{
      _id
      name
      description
    }
  }
`

Generated / RecipeData.tsx

export interface RecipeData_recipe {
  __typename: "Recipe";
  _id: string | null;
  name: string | null;
  description: string | null;
}

export interface RecipeData {
  recipe: (RecipeData_recipe | null)[] | null;

App.tsx

import React from 'react';
import './App.css';

import { RecipeData } from '../generated/RecipeData';
import { GET_ALL_RECIPES } from '../queries';
import { useQuery } from 'react-apollo-hooks';


const App: React.FC = () => {

  const { data, loading } = useQuery<RecipeData | null>(GET_ALL_RECIPES, {
    suspend: false
  })

  if (loading || !data) return <div>Loading</div>

  return (
    <div className="App">
      <ul>
        {
          data.recipe !== null && data.recipe.map(recipe => (
            <li>{recipe.name}</li>
          ))
        }
      </ul>

    </div>
  );
}

export default App;

useQuery的错误是

Error: Network error: Failed to fetch
    at new ApolloError (ApolloError.ts:46)
    at ObservableQuery.getCurrentResult (ObservableQuery.ts:199)
    at useQuery.js:65
    at updateMemo (react-dom.development.js:16854)
    at Object.useMemo (react-dom.development.js:17334)
    at useMemo (react.development.js:1643)
    at useQuery (useQuery.js:57)
    at App (App.tsx:8)
    at renderWithHooks (react-dom.development.js:16260)
    at updateFunctionComponent (react-dom.development.js:18347)
    at beginWork$1 (react-dom.development.js:20176)
    at beginWork$$1 (react-dom.development.js:25756)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at scheduleUpdateOnFiber (react-dom.development.js:23709)
    at dispatchAction (react-dom.development.js:17076)
    at useQuery.js:109
    at actHack (actHack.js:2)
    at Object.invalidateCurrentResult (useQuery.js:108)
    at notifySubscription (Observable.js:140)
    at onNotify (Observable.js:179)
    at SubscriptionObserver.error (Observable.js:240)
    at ObservableQuery.ts:701
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (ObservableQuery.ts:701)
    at Object.onError [as error] (ObservableQuery.ts:627)
    at invoke (QueryManager.ts:518)
    at QueryManager.ts:576
    at QueryManager.ts:1091
    at Set.forEach (<anonymous>)
    at QueryManager.ts:1087
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (QueryManager.ts:1085)
    at QueryManager.ts:434

谁能看到我做错的任何事情

Answer 1

尝试更改：

data.recipe !== null && data.recipe.map(recipe => (

收件人：

data.recipe && data.recipe.map(recipe => (

这将包括空检查和未定义检查。

Answer 2

当请求期间遇到网络错误并且无法获得响应时，

data将不确定。检查钩子返回的error对象，或查看来自浏览器开发工具内部服务器的原始响应，以确定实际的错误是什么。

Graphql，React-TypeError：无法读取未定义的属性“ map”

2 个答案: