通过功能组件呈现异步承诺

Question

很抱歉，如果帖子重复，我只找到类组件的示例。

我有这个代码：

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的字符串版本。如果需要已完成的值，则需要一个状态值，该值将在更新后重新呈现页面。类似这样的东西：

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 });
}