django Json显示空白

5uzkadbs  于 2023-01-03  发布在  Go
关注(0)|答案(1)|浏览(140)

我正在从一个网页中的json文件发出请求,但是返回一个空白屏幕。

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

function App() {

    const [posts, setPosts] = useState([])

    useEffect(() => {
      axios.get("https://economia.awesomeapi.com.br/json/last/USD-BRL")
      .then((response) => {
        console.log("ok")
        console.log(response.data)
        setPosts(response.data)
      }).catch(() => {
        console.log("erro")
      })
    
  }, [])

  return (
    <div>
      {posts?.map((post, key) =>{
      return(  
      <div key={key}>
        <td></td>
        <td>Dolar</td>
        <td>{post.bid}</td>
        <td>{post.create_date}</td>
      </div>)
    })}

  );
}

export default App;

控制台可以看到json文件,但是浏览器上的页面完全是空白的:

我尝试了许多json文件,只有一个工作,是这一个:https://api.covid19api.com/countries
我在使用React和Django时也遇到了同样的问题。

omhiaaxx

omhiaaxx1#

我认为你需要像下面这样Map一个对象的键

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

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://economia.awesomeapi.com.br/json/last/USD-BRL")
      .then((response) => {
        console.log("ok");
        console.log(response.data);
        console.log(response.data.USDBRL);
        console.log(response.data.USDBRL.bid);
        console.log(response.data.USDBRL.create_date);
        setPosts(response.data.USDBRL);
      })
      .catch(() => {
        console.log("erro");
      });
  }, []);

  return (
    <>
      {Object.keys(posts).map((keyName, i) => {
    if (keyName === "bid") {
      return (
        <li className="travelcompany-input" key={i}>
          <span className="input-label">
            Bid: {posts["bid"]}
            Create Date: {posts["create_date"]}
          </span>
        </li>
      );
    }
  })}
    </>
  );
}

export default App;

结果如下

相关问题