Javascript 我无法进入嵌套的JSON对象，但只是有时候

我正在尝试从一个API获取数据，这个API就是使用ReactJS时具有嵌套对象的Gathring Scryfall API。当我尝试使用嵌套对象中的数据时，我会得到一个undefined的cannotreadpng。我发现这可能是一个异步问题，并通过将初始数组的状态更改为null，然后向呈现添加一个if语句来修复它，但一旦我将API url从更改为，我就无法再次访问嵌套对象中的图像url，尽管返回的JSON格式与第一个url相同。我现在不知所措

我尝试使用axios，尝试将fetch放在一个单独的函数中，然后将该函数放在componentDidMount中，但没有成功。将“cards”设置为null，然后将if cards===null{return null；}放入渲染中，这对第一个链接有效，但对第二个链接无效

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './components/Login'

class App extends Component {
  constructor() {

    super()

    this.state = {

      cards: null,
      isUpdated:false

      }
  }

  componentDidMount() {
    this.populateCards()
  }

  populateCards() {
    let url = 'https://api.scryfall.com/cards/search?order=cmc&q=c%3Ared+pow%3D3 '
    fetch(url)
    .then(response => response.json())
    .then(json => {
        console.log("setting the state.")
        console.log(json.data)
      this.setState({cards: json.data})
    })
  }

  render() {
    const { cards } = this.state;
    if (cards === null) {
      return null;
    }
    let cards1 = this.state.cards
    let cardItems = cards1.map((card) => {

      return (
        <li>{card.name} - {card.id}
        <p></p><img src={card.image_uris.png}/></li>
      )
    })

  return (
      <div className="App">
        <h1>HOME PAGE</h1>
        <Login />
        <ul>
        {cardItems}
        </ul>
      </div>
    )
  }
}

export default App;

---

响应中的某些对象没有image\u uris属性，因此会引发错误

添加这些行

let filtered = cards1.filter(card => card.image_uris);

然后映射到过滤后的数组，您将得到所需的内容

let cardItems = filtered.map(card => {
  return (
    <li>
      <img src={card.image_uris.png}/>
    </li>
  );
});

---

您好，欢迎来到StackOverflow，很好地回答了格式良好的第一个问题！首先，获取中的console.log是否返回上述数据？您是否尝试从此处记录json.data.image_URI？其次，我个人更喜欢在javascript上使用null的松散比较，因为==null将匹配null和undefinedjson.data[0]。image_URI*^这解决了问题！非常感谢你！我必须弄清楚，如果没有图像URI的卡被处理掉，是否会成为一个问题，但那是另一个问题，至少现在我知道是什么导致了这个问题。

let cardItems = filtered.map(card => {
  return (
    <li>
      <img src={card.image_uris.png}/>
    </li>
  );
});