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

Posted 2023-03-10

【中文标题】Graphql，React - TypeError：无法读取未定义的属性“地图”

【英文标题】：Graphql, React - TypeError: Cannot read property 'map' of undefined

【发布时间】：2020-05-14 07:40:33

【问题描述】：

我有一个 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'));

查询/index.tsx

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

生成/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

任何人都可以看到我做错了什么

【参考方案1】：

尝试改变：

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

到：

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

这将包括 null 和未定义的检查。

【讨论】：

这会停止控制台错误，但不会显示列表

【参考方案2】：

data在请求过程中遇到网络错误，无法得到响应时，将是未定义的。检查钩子返回的error 对象，或查看浏览器开发工具中服务器的原始响应，以确定实际错误是什么。

【讨论】：

在开发工具中，网络选项卡显示 localhost 失败，但未在选项卡中提供任何其他信息。控制台返回Failed to load resource: net::ERR_NAME_NOT_RESOLVED locahost:4000/:1

我已经用钩子返回的错误对象更新了问题

@cdmt locahost 不是有效的 DNS 名称，如错误所示。大概你的意思是localhost