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

Question

I am trying to use map method on the array included in JSON data I got from axios.get method such as 'console.log(data.results)'. when I try to access to the data in side of it, following error occurs:

TypeError: Cannot read property 'result' of undefined. 

When I put 'console.log(data)', however, it logs the json data without any problems. This is the code I wrote and json data in data object.

 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 

How can I access to the 'results' array in the data? thank you for help!

Answer 1

You need to ensure that you check if jsonData.results.data has been set or else it'll throw an error since this data isn't available from the start. Remember that your component does not wait till the async request has fulfilled first, so if you are trying to access a property (in this scenario the data) inside the state before it is set, then it will error out. Here's an example below to fix the issue:

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>
    );
  }
}

Personally, I'd keep the state as flat as possible and would go about setting data like below. This is because there is a lot of useless data that we can just discard like copyright information. Unless you use this information, we don't need to store it in the state as well as the actual data we need to use.

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>
    );
  }
}

Or if you want to keep all the other data from the response you can use a loading state that controls if the data should be rendered. Notice how we don't render the actual card until the axios request has fulfilled. This will stop the original issue you're running into where you are rendering data that doesn't exist yet.

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

The response returns an array named results , not data so you access it not with:

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

but with

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

Answer 3

is it simply a typo? since it cant read result, but its results.

this.state.jsonData.data.results