使用 react typescript 从 graphql 映射数据时无法读取未定义的属性

Question

我有这样的狗组件

const Dogs: React.FC = () => {
  const { loading, error, data } = useQuery(GET_DOGS);
  console.log(data)
  const renderedOption = data ? data.dogs.map(({dog, index}: {dog:any, index:number}) => (
    <option key={dog.id} value={dog.breed}>
      {dog.breed}
    </option>
  )) : "" ;

  return (
    <>
      {loading && "Loading..."}
      {error && `Error: ${error.message}`}
      {renderedOption}
    </>
  );
};

并且我像这样查询 graphql

export const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

及其错误原因：TypeError: Cannot read properties of undefined (reading 'breed') when i console.log(data) is appear and query its成功地，我还检查了我的网络以在浏览器上显示其 200 状态代码。但我不知道我什么时候尝试映射该数据时出现这样的错误。

Answer 1

尝试将您的 renderOption 更改为此，让我知道它是否有效。

const renderedOption = data ? data.dogs.map((dog:any, index: number) => (
    <option key={dog?.id} value={dog?.breed}>
      {dog?.breed}
    </option>
  )) : "" ;

使用 react typescript 从 graphql 映射数据时无法读取未定义的属性

Cannot Read properties of undefined when mapping data from graphql using react typescript

typescript

reactjs

graphql

react-typescript