Блог

Главная - Вопросы по программированию - Не удается преобразовать данные ответа в JSON

Не удается преобразовать данные ответа в JSON

#reactjs #api #async-await

Вопрос:

Я могу получить ответ от 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

Комментарии:

1. вы пробовали const jsonData = ждать ответа.json(), попробуйте это: const jsonData = ждать ответа.данные.json()

Ответ №1:

Вы можете напрямую вернуть axios ответ, ничего, кроме обещания, и получить доступ к результату с помощью 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 для вас. Просто удалите эту строку, и это сработает. Кроме того, вы не можете отображать объект 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>
);
}
Метки: