React JS，无法将道具内的嵌套数组写入控制台答案

【问题标题】：React JS, can't write nested array inside prop to consoleReact JS，无法将道具内的嵌套数组写入控制台
【发布时间】：2020-06-04 07:56:30
【问题描述】：

我使用了第 3 方 API 并将响应保存到一个状态，然后我将响应中的一个对象作为道具传递给另一个组件。

这是道具。

{
  "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...

  ]
}

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

console.log(this.props.searchResults);

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

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

这是错误。

TypeError: this.props.searchResults is undefined

我最终要做的是尝试通过游戏数组映射并在浏览器中呈现标题，但如果我什至不能在控制台中编写标题，那么我显然有问题。我对 javascript 和 react 都很陌生，所以我很确定在迭代一个值为数组的对象键时，我缺少一些简单的东西。

我尝试的另一件事是首先将“游戏”数组发送到组件，但我遇到了同样的问题。

【问题讨论】：

也许你的 this.props.searchResults 在某些时候是未定义的？如果您添加检查以确保在访问游戏之前已定义 this.props.searchResults 会怎样？类似于： if (!!this.props.searchResults) {console.log(this.props.searchResults.games);}
运行 console.log(this,props.searchResults.count) 看看是否可行
@recidplayer 在传递给其他组件之前执行控制台并检查值是否存在或未定义...您可以在沙箱中分享您的代码吗？
@NickG 这行得通，让游戏数组写入控制台。

标签： javascript arrays reactjs react-props

【解决方案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>
  }
}

【讨论】：

谢谢，效果很好！我只需要把它改成return searchResults ? ( ...