Gatsby / Ax ios: пытается использовать js -поиск, ax ios не использует данный JSON -ответ

Question

Код, пытающийся получить данные:

class Search extends Component {
  state = {
    bookList: [],
    bookk: "",
    search: [],
    searchResults: [],
    isLoading: true,
    isError: false,
    searchQuery: "",
  }
  /**
   * React lifecycle method to fetch the data
   */
  async componentDidMount() {
    Axios.get('http://localhost:8000/hentObjekterJSON/Studium')
      .then(result => {
        const bookData = result.data
        bookk = result.data
        this.setState({ bookList: bookData.Studium})
        this.rebuildIndex()
      })
      .catch(err => {
        this.setState({ isError: true })
        console.log("====================================")
        console.log(`Something bad happened while fetching the data\n${err}`)
        console.log("====================================")
      })
  }

Ответ JSON:

{"Studium": {"studiumkode": "ABIOK", "studium": "ABIOK (anestesi/barnevern/intensiv/operasjon/kreftsykepleie"}}

Кажется, что ни bookList, ни bookk не имеют назначенных данных вообще.

Я проверил, и URL обслуживает JSON (как JsonResponse)) Почему Ax ios не может найти и использовать данные?

Answer 1

Некоторые предложенные указатели ...

class Search extends Component {
    state = {
        bookList: [],
        bookk: "",
        search: [],
        searchResults: [],
        isLoading: true,
        isError: false,
        searchQuery: "",
    }

/**
    * React lifecycle method to fetch the data
*/

// Not sure you need async on the below line
async componentDidMount() {
    Axios.get('http://localhost:8000/hentObjekterJSON/Studium')
    .then(result => {

        const bookData = result.data
        console.log(bookData) // Actually see what is returned.

        // You may need to parse the data....
        const bookData = JSON.parse(result.data)

        bookk = result.data // This should a 'setState'.

        this.setState({ bookList: bookData.Studium,
                        bookk: result.data})

        // setState is async, so rebuild might run before setState has finished.
        this.rebuildIndex()

        // If you want something to run only once set state has completed, then try
        this.setState({ bookList: bookData.Studium,
                        bookk: result.data}, this.rebuildIndex())
    })
    .catch(err => {
        this.setState({ isError: true })
        console.log("====================================")
        console.log(`Something bad happened while fetching the data\n${err}`)
        console.log("====================================")
    })
}