javascript 尝试用所有必要的信息开始一个页面React JS

zysjyyx4 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(115)

我试图找到一种方法来传递作为一个 prop 的价值，我在获取。我现在尝试这个，购买所有页面是空白的。

import './App.css';
import React from 'react';
import RealDolar from './components/real_dolar.js';

function App() {
  let url = 'https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=8EqP0C6iM0eDi5UbAqdLwnLnFIUflB920Izw7jtO';
  fetch(url).then(res=>{
      return res.json()
  }).then(json=>{
    return (
    <div className="Real_Rapido">
      <RealDolar cotacao={json['data']['BRL']}/>
      <Informacoes />
    </div>
  );
  })
}

export default App;

在此之前，我尝试了这个：

import './App.css';
import React, {useState} from 'react';
import RealDolar from './components/real_dolar.js';

function App() {
  const [realDolar, setRealDolar] = useState(0);

  let url = 'https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=8EqP0C6iM0eDi5UbAqdLwnLnFIUflB920Izw7jtO';
  fetch(url).then(res=>{
    return res.json()
  }).then(json=>{
    setRealDolar(json['data']['BRL']);
  })

  return (
    <div className="Real_Rapido">
      <RealDolar cotacao={realDolar}/>
    </div>
  );
}

export default App;

但也不起作用。
请帮帮忙

JavaScript

来源：https://stackoverflow.com/questions/75906961/trying-to-start-a-page-with-all-necessary-information-react-js

2条答案

按热度按时间

8ehkhllq1#

您可以看到此工作here

import React, {useState, useEffect} from 'react';
import RealDolar from './components/real_dolar.js';
import './App.css';

function App(props) {
   const [realDolar, setRealDolar] = useState()

  const fetchDolar = async () => {
    const url = "https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=8EqP0C6iM0eDi5UbAqdLwnLnFIUflB920Izw7jtO"
    const res = await fetch(url)
    const {data} = await res.json()
    const {BRL} = data

    setRealDolar({ BRL })
  }

  useEffect(() => {
    fetchDolar()
  }, [])

  if (realDolar == null) return <div>Loading</div>

  return (
    <div className="Real_Rapido">
      <RealDolar cotacao={realDolar['BRL']}/>
      <Informacoes />
    </div>
  )
}

export default App

// RealDolar  Component
function RealDolar({cotacao}) {
  // use cotacao here
  // ... 
}

EDIT：示例url错误
EDIT2：新增导出默认值

赞(0）回复(0）举报 2023-04-04

fivyi3re2#

图片[1]：https://i.stack.imgur.com/Ug4lv.jpg

//App Page

import "./styles.css";

import React, { useState, useEffect } from "react";
import RealDolar from "./components/RealDolar";

function App() {
  const [realDolar, setRealDolar] = useState(0);

  let url =
    "https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=8EqP0C6iM0eDi5UbAqdLwnLnFIUflB920Izw7jtO";

  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch(url)
      .then((res) => {
        // console.log(res.json());
        return res.json();
      })
      .then((json) => {
        setRealDolar(json["data"]["BRL"]);
      });
    // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

  console.log(realDolar);

  return (
    <div className="Real_Rapido">
      hello
      <RealDolar cotacao={realDolar} />
    </div>
  );
}

export default App;

//component Page
import React, { useState } from "react";
// import RealDolar from './components/real_dolar.js';

function RealDolar({ cotacao }) {
  // const [realDolar, setRealDolar] = useState(0);
  console.log("realDollar", cotacao);

  return (
    <div className="Real_Rapido">
      <div>Real Dolar</div>
      <div>{cotacao}</div>
    </div>
  );
}

export default RealDolar;

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 尝试用所有必要的信息开始一个页面React JS

2条答案

相关问题

热门标签

最新问答