如何在 React Native 中正确渲染 axios 调用？

Question

我创建了一个组件，用于在将硬币名称传递给组件时返回价格值。

在函数内部的控制台输出中，显示结果但不返回值。

我的代码：

MarketPrice.js

import React, { useEffect, useState } from "react";
import { Text } from "react-native";
import axios from "axios";

function round(num) {
  var m = Number((Math.abs(num) * 100).toPrecision(15));
  return (Math.round(m) / 100) * Math.sign(num);
}

const goForAxios = async (coin) => {
  //setLoading(true);

  const response = await axios.get(
    `https://min-api.cryptocompare.com/data/price?fsym=${coin}&tsyms=INR`
  );
  console.log(response.data.INR.toString());
  return response.data.INR.toString();
};

export default function MarketPrice(props) {
  console.log(props.coin);
  const marketPrice = goForAxios(props.coin);
  // return marketPrice;
  console.log("MarketPrice: " + marketPrice);
  return <Text>{round(marketPrice)}</Text>;
}

UI 中的输出显示为 NaN 在控制台上：

119.12
ADA
BTC
3058216.2

Answer 1

您正在尝试使用一个不太有效的异步函数的返回值（因为它返回一个 Promise - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function）。更好的方法是添加一个可以有条件渲染的result 状态（取决于props.coin 的值）

export default function MarketPrice(props) {
  const [result, setResult] = useState(null);

  const goForAxios = async (coin) => {
    const response = await axios.get(
      `https://min-api.cryptocompare.com/data/price?fsym=${coin}&tsyms=INR`
    );
    setResult(response.data.INR);
  };

  const marketPrice = goForAxios(props.coin);
  console.log(result);
  return <div>Market Price: {result ? round(result) : "Not Found"}</div>;
}