Gatsby/Axios: Trying to use js-search, axios doesnt use given JSON-response

The code trying to fetch data:

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("====================================")
      })
  }

The JSON-Response:

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

Neither bookList nor bookk seems to have data assigned at all.

I have checked and the URL is serving the JSON (as a JsonResponse)) Why won't Axios find and use the data?

Solution

Some suggested pointers...

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("====================================")
    })
}