Question

这是api http://skunkworks.ignitesol.com:8000/books/，我正在尝试使用fetch方法从中获取数组结果，但出现错误，无法获取未定义的值

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super()
    this.state = {
      books: []
    }
  }

  componentDidMount() {
    fetch('http://skunkworks.ignitesol.com:8000/books/')
      .then(res => res.json())
      .then(data => this.setState({ books: data }))
      .catch(e => {
        console.log(e);
        return e;
      });
  }

  render() {
    let book = []
    book = this.state.books.results;
    console.log(book[0])
    return (
      <div>
        <h1>Books</h1>
      </div>
    )

  }
}
export default App;

这是我的代码。

我还观察到json数据通常类似于[{}]，但这里是{}格式。请给我建议一些解决方案.....

Answer 1

正如我从您的url链接中看到的那样，您从api返回的对象的 results 键中存在json数据数组。

因此，如果您仅对结果感兴趣，则应该执行以下操作：


import React, { Component } from 'react';

class App extends Component {

  state = {
    books: []
  }

  async componentDidMount() {
    const objectFromUrl = await fetch('http://skunkworks.ignitesol.com:8000/books/')
    const data = await objectFromUrl.json() //first way
    // or you can use destructuring way 
    const { results } = await objectFromUrl.json() //second way
    this.setState({
      books: data.results // results key contains your '[{}]' data an array of objects
    })
  }

  render() {
    const { books } = this.state

    return (
      <div>
        <h1>Books</h1>
        {books.map(book => (
          <h2> {book.id} </h2>
        )}
      </div>
    );
  }

  // You can use destructuring again to get only key you're interested by

  render() {
    const { books } = this.state

    return (
      <div>
        <h1>Books</h1>
        {books.map(({id, formats}) => (
          <h2> {id} </h2>
           <h2> { formats[ˋapplication/pdf’] } </h2>
        )}
      </div>
    );
  }
}

如何从json获取对象数组

1 个答案: