我可以在 getCurrency 函数中 console.log(data) 但不能分配数据来设置货币。它不起作用

Question

我可以 console.log getCurrency funuction.but 中的数据值，当我尝试将数据放入 setCurrency 并从货币中获取它时，它不会 work.its 只是空对象。

import React ,{useState, useEffect} from 'react';
import TranslateForm from './translateComponent';

const Main = () => {

    const API_KEY = 'b8533a4d2a2297728b70';

    const [rcurrency, setRcurrency] = useState('USD');
    const [ccurrency, setCcurrency] = useState('LKR');
    const [query, setQuery] = useState();
    const [currency, setCurrency] = useState({});

    useEffect(() => {
        setCurrency(getCurrency());
        console.log(currency);
    },[]);

    useEffect(
        () => {
            getQuery();
        },[query]
    );
    

    const getCurrency = async() => {
        const responce = await fetch(`https://free.currconv.com/api/v7/currencies?apiKey=${API_KEY}`);
        const data = await responce.json();
        console.log(data);
        setCurrency(data);
    }
   

    const getQuery = async() => {
        const responce = await fetch(`https://free.currconv.com/api/v7/convert?q=${rcurrency}_${ccurrency},${ccurrency}_${rcurrency}&compact=ultra&apiKey=${API_KEY}`);
        const qdata = await responce.json();
        setQuery(qdata[Object.keys(qdata)[0]]);
        console.log(query);
    }

    return(
        <div>
            <TranslateForm/>
        </div>
    );

}



export default Main;

Answer 1

实际上，问题是您的函数没有 returning 任何数据以便在 setCurrency 方法中进行设置。在您的 getCurrency() 方法中设置数据或 return 来自 getCurrency 的数据并在 useEffect() 中设置。

useEffect(() => {
        const respCurrency = getCurrency();
        respCurrency.then((data)=>{
          setCurrency(respCurrency);
       })
        console.log(currency); // this will always give you default value
    },[]);

    const getCurrency = async() => {
        const responce = await fetch(`https://free.currconv.com/api/v7/currencies?apiKey=${API_KEY}`);
        const data = await responce.json();
        console.log(data);
        setCurrency(data);
        return data;
    }
return(
        <div>
    Data : JSON.stringify(currency) // Your currency logging
            <TranslateForm/>
        </div>
    );

此外，由于 getCurrency 是一个异步函数，它很可能 return 向您承诺 object.So 使用 .then() 方法分配给 setCurrency 方法。现在在您的渲染方法中尝试统一货币，您将获得数据。

我希望这能奏效。谢谢

我可以在 getCurrency 函数中 console.log(data) 但不能分配数据来设置货币。它不起作用

i can console.log(data) in getCurrency function but can't asign data to setCurrency .it does'nt work

javascript

fetch