Question

未捕获的类型错误：无法读取未定义的属性（读取“common”）

2022-05-06

685

javascript reactjs

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

const CountryDetail = () => {
    const {countryname}=useParams();
    const[countrydet,setCountry]=useState([]);
    useEffect(()=>{
        const url=`https://restcountries.com/v3.1/name/${countryname}`;
        fetch(url)
        .then(res=>res.json())
        .then(data=>setCountry(data))
    },[])
    return (
        <div style={{textAlign: 'center'}}>
            
            <h3>This is country details : {countryname}</h3>
            <h4>{countrydet.name.common}</h4>
            <h4>{countrydet.continents}</h4>
            
        </div>
    );
};

导出默认CountryDetail;

but there is a element in object {"name":{"common":"Bangladesh","official":"People's Republic of Bangladesh","nativeName":{"ben":{"official":"বাংলাদেশ গণপ্রজাতন্ত্রী","common":"বাংলাদেশ"}}}

Answer 1

当组件首次呈现时，异步 API 调用和状态设置尚未发生，因此 countrydet 未定义。

<h3>This is country details : {countryname}</h3>
            <h4>{countrydet?.name?.common}</h4>
            <h4>{countrydet?.continents}</h4>

这应该可以工作，这里是可选链接的 MDN 参考。

或者，您可以将整个块包装在条件中，如下所示：

<h3>This is country details : {countryname}</h3>
            { countrydet?.name?.common && countrydet?.continent ? 
               <>
                 <h4>{countrydet?.name?.common}</h4>
                 <h4>{countrydet?.continents}</h4>
               </>
               :
               <></>
             }

Answer 2

首先，为 countrydet 设置初始状态。
然后正确解开来自获取请求的响应。 .then(([data]) => setCountry(data));
在执行获取请求之前，检查 countryname 参数是否已设置。
在尝试访问其属性之前，检查 countrydet 是否已定义。

const CountryDetail = () => {
  const { countryname } = useParams();
  const [countrydet, setCountry] = useState(undefined);

  useEffect(() => {
    if (countryname) {
      const url = `https://restcountries.com/v3.1/name/${countryname}`;
      fetch(url)
        .then((res) => res.json())
        .then(([data]) => setCountry(data));
    }
  }, [countryname]);

  return (
    <div style={{ textAlign: "center" }}>
      <h3>This is country details : {countryname}</h3>
      {countrydet && (
        <>
          <h4>{countrydet.name.common}</h4>
          <h4>{countrydet.continents}</h4>
        </>
      )}
    </div>
  );
};