如何使用从 axios.get 方法驱动的 JSON 数据？

Question

我正在尝试对从 axios.get 方法（例如“console.log(data.results)”获得的 JSON 数据中包含的数组使用 map 方法。当我尝试访问其中的数据时，会出现以下错误：

TypeError: Cannot read property 'result' of undefined. 

但是，当我输入“console.log(data)”时，它会毫无问题地记录 json 数据。这是我写的代码和数据对象中的json数据。

componentDidMount() {
  axios.get('https://api.nytimes.com/svc/topstories/v2/science.json?api-key=privatekey')
      .then(result=>
            this.setState({jsonData:result})
           )
      .catch(error=> console.log(error))
  }
  
  render() {
    return(
      <div id="cards-wrapper">
       {console.log(this.state.jsonData.data)}
      </div>
    )
  }
<!-- console error-->

{status: "OK", copyright: "Copyright (c) 2019 Company. All Rights Reserved.", section: "science", last_updated: "2019-01-26T15:57:14-05:00", num_results: 28, …}
copyright: "Copyright (c) 2019 Company. All Rights Reserved."
last_updated: "2019-01-26T15:57:14-05:00"
num_results: 28
results: (28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
section: "science"
status: "OK"
__proto__: Object

如何访问数据中的“结果”数组？谢谢你的帮助！

Answer 1

您需要确保检查 jsonData.results.data 是否已设置，否则会引发错误，因为该数据从一开始就无法使用。请记住，您的组件不会等到异步请求首先完成，因此如果您尝试在设置之前访问状态内的属性（在这种情况下是数据），那么它将出错。以下是解决此问题的示例：

class App extends React.Component {
  state = {
    jsonData: null,
  };

  componentDidMount() {
    axios
      .get(
        "https://api.nytimes.com/svc/topstories/v2/science.json?api-key=JoqkiXzZ0GoPgjxFrhHBA42XLzGwAYFq"
      )
      .then(result => this.setState({ jsonData: result }))
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div id="cards-wrapper">
        {this.state.jsonData && this.state.jsonData.data.results.map((article) => (
          <div key={article.short_url}>
            {article.title}
          </div>
        ))}
      </div>
    );
  }
}

就个人而言，我会尽可能保持状态平坦，并会像下面这样设置数据。这是因为有很多无用的数据，我们可以像版权信息一样丢弃。除非您使用此信息，否则我们不需要将其存储在状态以及我们需要使用的实际数据中。

class App extends React.Component {
  state = {
    jsonData: []
  };

  componentDidMount() {
    axios
      .get(
        "https://api.nytimes.com/svc/topstories/v2/science.json?api-key=JoqkiXzZ0GoPgjxFrhHBA42XLzGwAYFq"
      )
      .then(response => this.setState({ jsonData: response.data.results }))
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div id="cards-wrapper">
        {this.state.jsonData.map(article => (
          <div key={article.short_url}>{article.title}</div>
        ))}
      </div>
    );
  }
}

或者，如果您想保留响应中的所有其他数据，您可以使用loading 状态来控制是否应呈现数据。请注意，在 axios 请求完成之前，我们不会渲染实际的卡片。这将停止您在呈现尚不存在的数据时遇到的原始问题。

class App extends React.Component {
  state = {
    jsonData: [],
    loading: true
  };

  componentDidMount() {
    axios
      .get(
        "https://api.nytimes.com/svc/topstories/v2/science.json?api-key=JoqkiXzZ0GoPgjxFrhHBA42XLzGwAYFq"
      )
      .then(response =>
        this.setState({ loading: false, jsonData: response })
      )
      .catch(error => console.log(error));
  }

  render() {
    return this.state.loading ? (
      <div>loading...</div>
    ) : (
      <div id="cards-wrapper">
        {this.state.jsonData.data.results.map(article => (
          <div key={article.short_url}>{article.title}</div>
        ))}
      </div>
    );
  }
}

Answer 2

响应返回一个名为 results 的数组，而不是 data，因此您不能通过以下方式访问它：

console.log(this.state.jsonData.data)

但有

console.log(this.state.jsonData.results)

Answer 3

这只是一个错字吗？因为它不能读取结果，但它的结果。

this.state.jsonData.data.results