Javascript 通过函数组件渲染异步 Promise

    export const getUniPrice = async () => {
        const pair = await Uniswap.Fetcher.fetchPairData(HOKK, Uniswap.WETH[ETH_CHAIN_ID]);
        const route = new Uniswap.Route([pair], Uniswap.WETH[ETH_CHAIN_ID]);
        const priceUni = route.midPrice.toFixed(9);
        return priceUni
    }

[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "1106278.001628948"

const Price = () => {
    const { state, dispatch } = useContext(AppContext);
    return(<>
        {state.dex === 'uni' ? getUniPrice() : state.dex === 'cake'
            ? getCakePrice() : getMDexPrice()
    }
    </>)
 } 

const [price, setPrice] = useState('');

useEffect(() => {
  getUnitPrice().then((p) => setPrice(p));
}, []);

...

<div>Price: {price}</div>

state = {
  price: '',
}
async componentDidMount() {
  const p = await getUniPrice();
  this.setState({ price: p });
}

Javascript相关问答推荐

如何在我的Web应用程序中使用JavaScript显示和隐藏喜欢/不喜欢按钮？

在shiny 模块中实现JavaScript

在JavaScript中检索一些文本

fetch在本地设置相同来源的cookie，但部署时相同的代码不会设置cookie

*ngFor和@代表输入decorator 和选角闭合

Vega中的模运算符

如何避免移动设备中出现虚假调整大小事件？

Cypress -使用commands.js将数据测试id串在一起失败，但在将它们串在一起时不使用命令有效

React Code不在装载上渲染数据，但在渲染上工作

如何修复我的js构建表每当我添加一个额外的列作为它的第一列？

如何粗体匹配的字母时输入搜索框使用javascript？

无法检测卡片重叠状态的问题

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

保持物品顺序的可变大小物品分配到平衡组的算法

向数组中的对象添加键而不改变原始变量

为什么我的按钮没有从&q；1更改为&q；X&q；？

在Odoo中如何以编程方式在POS中添加产品

将嵌套数组的元素乘以其深度，输出一个和

无法设置RazorPay订阅API项目价格

Promise.race()返回已解析的promise ，而不是第一个被拒绝的promise