Как я могу использовать данные JSON, полученные из метода axios.get?

Question

Я пытаюсь использовать метод map для массива, включенного в данные JSON, полученные из метода axios.get, например 'console.log (data.results)'.Когда я пытаюсь получить доступ к данным в стороне от него, возникает следующая ошибка:

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