Uncaught TypeError: Cannot read properties of undefined (reading 'url')

Question

我是 React js 的新手，由于获取图像映射，我遇到了未捕获的类型错误：无法读取未定义的属性（读取 'url'）错误。如果我使用文件中已有的数据，它工作正常，但如果我必须获取数据，它会产生此错误。这是尝试过的。请让我知道如何修复此错误。

 const THECATAPI = 'https://api.thecatapi.com/v1/breeds'

  const [catList, setCatList] = useState([])


       const axiosPosts = async () => {
      try {
        const response = await axios(THECATAPI)
        setCatList(response.data)
      } catch (error) {
        console.log('erroRRRR');

      }
    };



 
   // return 
<div>

 
    {
        catList.map((obj, i) => (
            <div >
                <img src={obj['image']['url']} alt='loading' />
            </div>
    }

</div>

Answer 1

由于您是从数组中访问嵌套值，因此在某些情况下，可能不会显示该值。您可以在访问嵌套字段时使用 optional chaining。您可以像这样简单地更改您的代码块。

{catList.map((obj, i) => (
  <div key={obj?.id}>
    <img src={obj?.image?.url} alt="loading" />
  </div>
))}

在此处附加沙箱。

Uncaught TypeError: Cannot read properties of undefined (reading 'url')

Uncaught TypeError: Cannot read properties of undefined (reading 'url')

javascript

reactjs

axios