通过函数组件呈现异步承诺

Question

抱歉，如果 post 重复，我只是找到 class 组件的示例。

我有这个代码：


    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"

我想知道的是，我怎样才能正确地使用这个对象，以便能够通过函数组件来渲染它？我正在做类似这样的事情，但显然行不通，因为 React 不渲染对象。

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

有人可以给我提示吗？这个函数运行在函数组件之外，所以我不能只使用 useState

Answer 1

你是对的。 getUnitPrice() 的结果是一个 Promise，而不是一个值，所以 React 所做的是打印出该 Promise 的字符串化版本。如果您需要已完成的值，则需要一个状态值，该状态值将 re-render 页面更新。像这样：

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

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

...

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

如果您使用的是 class 组件，您可以像这样初始化状态：

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

通过函数组件呈现异步承诺

Rendering async promises through function components

javascript

promise

async-await

reactjs

react-functional-component