未处理的拒绝（TypeError）：response.json 不是函数

Question

我是 React 的初学者，遇到了一些问题。遇到问题 Unhandled Rejection (TypeError)：respo.json 不是函数。

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

使用 respo.data 代替：

您的响应有一个您需要获取的数据键。

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;

工作代码：https://codesandbox.io/s/elated-platform-1itbi?file=/src/App.js

Answer 2

你的代码有两个问题：

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

这应该是：

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

1. const resp = await respo.data;

这应该是：

const resp = respo.data;

respo.data 不是一个承诺，而是已经是 api 的结果。

注意：

要更新monster，您必须调用setMonster(resp) 而不是setMonster({ monster: resp })

Answer 3

使用 get/then 代替 async/await 怎么样？

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