无法将响应数据转换为 JSON答案

【问题标题】：Not able to convert response data into JSON无法将响应数据转换为 JSON
【发布时间】：2021-09-03 01:32:59
【问题描述】：

我能够从 API 获得响应，但无法将响应转换为 Json 并且无法返回数据。它只是返回 null。

 const responseData = async () => {
    try{
        const response = await axios.get('https://randomuser.me/api')
        console.log(response) // console object
        
      const jsonData = await response.json()
        return jsonData;
    }catch(err){
      console.error(err)
    }
}

    export default function App() {
  const [randomUserDataJson,setRandomUserDataJson] = useState('')

  useEffect( () => {
    responseData().then(randomdata => {
      setRandomUserDataJson(randomdata || 'not found') 
   })

  }, []);
 return (
    <div >
      <pre>
          <p>{randomUserDataJson}</p>
      </pre>
    </div>
  );
}

输出

not found

【问题讨论】：

你试过 const jsonData = await response.json()，试试这个：const jsonData = await response.data.json()

标签： reactjs api async-await

【解决方案1】：

您可以直接返回 axios 响应，只返回 promise 并使用 then 方法访问结果。

import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [randomUserDataJson, setRandomUserDataJson] = useState("");

  useEffect(() => {
    responseData().then((randomdata) => {
      const data = JSON.stringify(randomdata.data);
      setRandomUserDataJson(data || "not found");
    });
  }, []);
  return (
    <div>
      <pre>
        <p>{randomUserDataJson}</p>
      </pre>
    </div>
  );
}

const responseData = async () => {
  try {
    const response = await axios.get("https://randomuser.me/api");
    return response;
  } catch (err) {
    console.error(err);
  }
};

codesandbox - https://codesandbox.io/s/withered-bush-iicqm?file=/src/App.js

【讨论】：

【解决方案2】：

你不用const jsonData = await response.json()，axios会为你反序列化响应JS Object。只需删除该行即可。此外，您不能将 JS 对象呈现为 React 组件的子对象，因此必须对其进行字符串化。

import axios from 'axios';
import { useState, useEffect } from 'react';

const responseData = async () => {
  try{
      const response = await axios.get('https://randomuser.me/api')
      console.log(response) // console object
    
      return response;
  }catch(err){
    console.error(err)
  }
}

  export default function App() {
const [randomUserDataJson,setRandomUserDataJson] = useState('')

useEffect( () => {
  responseData().then(randomdata => {
    setRandomUserDataJson(randomdata || 'not found') 
 })

}, []);
return (
  <div >
    <pre>
        <p>{JSON.stringify(randomUserDataJson, null, 2)}</p>
    </pre>
  </div>
);
}

【讨论】：