ReactJS/Javascript/Graphql/React-apollo：无法读取未定义的属性“名称”

Question

此处定义的 GraphQL 查询

const countryQuery = gql`
query getQuery($filter: _CountryFilter!) {
    Country(filter: $filter) {
        _id
        name
        capital
        population
        nativeName
    }
  }

`

pages/search.js

export default function Search() {
const [filter, setFilter] = useState({ name: 'Chile' })
const { data, loading, error } = useQuery(countryQuery, {
        variables: { filter },}) 

    if (loading){ 
      return <Loader />;
    }
    if (error) return <p>Error</p>;            
  
return (
    <div className="body">
     <h1>
       Get Information
        <br /> about Countries!
      </h1>
  

     <div className="wrapper">
       <input 
        className="search" 
        type="text" 
        id="search" 
        placeholder='Enter a Country'
      />

       <button 
        className="submit" 
        type="submit" 
        value=" "
        onClick={e => setFilter({ name: e.target.value })}
        onBlur={e => setFilter({ name: e.target.value })} 
        > Search
          
       </button>
    
       <div>

        { data?.Country && <CountryInfo country={data?.Country[0]} /> }
    
       </div>
     </div>
   </div>
  );
 }

components/queryResults.js 这是我得到的错误。 {country.name}、{country.capital} 等在此处应用数据的方式不正确吗？

import React from 'react'
import { Card, ListGroup, ListGroupItem } from 'react-bootstrap'

const CountryInfo = ({country}) => (
 <div> 
   <Card style={{ width: '18rem' }}>
    <Card.Body>
      <Card.Title>{country.name}</Card.Title> 
    </Card.Body>
   <ListGroup className="list-group-flush">
    <ListGroupItem>Capital: {country.capital} </ListGroupItem> {' '}
    <ListGroupItem>Population: {country.population}</ListGroupItem>
    <ListGroupItem>Native Name: {country.nativeName}</ListGroupItem>
   </ListGroup>
   </Card>
 </div>
 )

export default CountryInfo;

当我输入国家并单击搜索时，此行出现错误：<Card.Title>{country.name}</Card.Title> 为什么名称、首都、人口和 nativeName 未定义？我做错了什么？

Answer 1

我正在查看这一行并想指出，如果 data.country 是一个空数组，它仍然是真实的。在渲染 CountryInfo 之前添加检查以查看数组的第一个元素中是否有值

{ data?.Country && <CountryInfo country={data?.Country[0]} /> }