Unhandled Rejection (TypeError): respo.json is not a function

Question

I'm a beginner in React and stuck with some problem. Getting an issue Unhandled Rejection (TypeError): respo.json is not a function.

import React, { useEffect } from "react";
import { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";

function App() {
  const { monster, setMonster } = useState([]);

  useEffect(() => {
    async function fetchData() {
      const respo = await axios.get("https://jsonplaceholder.typicode.com/users");
      const resp = await respo.data;
      setMonster({ monster: [...resp] });
    }

    fetchData();
  }, [monster]);

  return (
    <div className="App">
      <p>{console.log(monster)}</p>
    </div>
  );
}

export default App;

Answer 1

Use respo.data instead:

Your response has a data key which you need to fetch.

import React, { useEffect } from 'react';
import {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

function App() {
  const [monster,setMonster]=useState([]);

  useEffect(()=>{
    async function fetchData() {
     const respo=await axios.get('https://jsonplaceholder.typicode.com/users')
     const resp=await respo.data;
     setMonster({monster:[...respo]});

    }

      fetchData();
},[]);
  return (
    <div className="App">
      <p>{console.log(monster)}</p>
    </div>
  );
}

export default App;

Working code:https://codesandbox.io/s/elated-platform-1itbi?file=/src/App.js

Answer 2

There are two problems in your code:

1. const {monster,setMonster}=useState([]);

This should be:

const [monster,setMonster] = useState([]);

2. const resp = await respo.data;

This should be:

const resp = respo.data;

respo.data is not a promise, but already the result of the api.

Note:

To update monster , you have to call setMonster(resp) not setMonster({ monster: resp })

Answer 3

How about just using get/then instead of async/await?

useEffect(()=>{
    axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
            setMonster({
                monster:[...response.data]
            });
        });
    }
},[monster]);