React JS，无法将嵌套数组写入控制台

Question

我消费了第 3 方 API 并将响应保存到状态，然后我在响应中将 object 作为 prop 传递给另一个组件。

这是道具

{
  "count": 20,
  "games": [
    {
      "id": 66947,
      "game_title": "Zelda 64: Dawn & Dusk",
      "release_date": "2019-09-22",
      "platform": 3,
      "developers": [
        6043
      ]
    },
    {
      "id": 49433,
      "game_title": "Zelda II - The Adventure of Link",
      "release_date": "2013-09-12",
      "platform": 38,
      "developers": [
        6037
      ]
    },

    ....etc...

  ]
}

我不知道如何通过映射访问 "games" 数据。所以我想我会尝试简单地将值写入控制台，看看我是否在某个地方犯了一个愚蠢的错误。如果我用这段代码编写道具来控制台。

console.log(this.props.searchResults);

它会像您期望的那样将所有内容写入控制台。但是，如果尝试使用此代码编写游戏数组，则会出现错误。

console.log(this.props.searchResults.games);

这是错误。

TypeError: this.props.searchResults is undefined

我最终要做的是通过游戏数组进行映射并在浏览器中呈现标题，但如果我什至无法在控制台中写入标题，那么我显然有问题。我对 javascript 和 React 都是新手，所以我很确定我缺少一些简单的东西来遍历一个 object 键，它的值是一个数组。

我尝试的另一件事是首先将 "games" 数组发送到组件，但我运行遇到了同样的问题。

Answer 1

这个应该和promise有关。由于您能够在控制台中记录道具，这意味着您没有犯任何愚蠢的错误。当您进行 api 调用并将其设置为状态时。在 promise 得到解决之前总是有延迟，因此组件只会将 searchResult 获取为 null。所以，你需要做的就是等待数据被获取。最简单的方法可以是这样的：

Class YourComponent extends React.Component {
  state = {
    searchResults: {}
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    // Load data from api here
    this.setState({searchResults: {games: 'just replace this whole setState with your response data' }})
  }

  render() {
    return (
      <div>
      <ChildComponent searchResults={this.state.searchResults} />
      </div>
    )
  }
}

现在在你的子组件中你可以简单地这样做：

class ChildComponent extends React.Component {
  render() {
    const {searchResults} = this.props;
    return searchResults.games ? (
      <div>
      {
        // Your logic here to use searchResults.games
      }
      </div>
    ): <div>Loading</div>
  }
}

React JS，无法将嵌套数组写入控制台

React JS, can't write nested array inside prop to console

javascript

arrays

reactjs

react-props