首页 > 解决方案 > 未处理的拒绝(TypeError):respo.json 不是函数

问题描述

我是 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;

在此处输入图像描述

在此处输入图像描述

标签: javascriptreactjsasync-awaitaxiosuse-effect

解决方案


在此处输入图像描述改用 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


推荐阅读