在 React 功能組件中調用異步方法

Question

我有一個關於解決我在 React 中的這個問題的好方法的問題。 我需要從我自己創建的 API 中收集貨幣，它運行良好，我在 React 組件的 return 語句中對其進行了迭代。 迭代時，我想使用“item.pairs”數據作為方法調用（異步方法）的參數來獲取價格信息並呈現它。 如何實現？

我添加了一個方法 getCurrencyData，我嘗試在循環內的 return 語句中調用它，但它不起作用，我已經搜索過這個方法，但不可能這樣做。 那么我該怎么做呢？

使用的代碼如下：

const Start = () => {
    let match = useRouteMatch()
    const [currencies, setCurrencies] = useState([])
    const [currencyPrices, setCurrencyPrices] = useState([])

    useEffect(() => {
        getAllCurrencies()
    }, [])

    const getCurrencyData = async (ticker) => {
        try {
            const response = await KrakenService.getByTicker(ticker)
            return Object.values(response.data.result)[0].c[0]
        } catch (err) {
            console.log(err)
        }
    }

    const getAllCurrencies = async () => {
        try {
            const response = await CryptoCurrencyService.getAll()
            setCurrencies(response.data.results)
        } catch (err) {
            console.log(err)
        }
    }

    return(
        <div className='Start'>
            <Switch>
                <Route path={`${match.path}/:currencyId`}>
                    test
                </Route>
                <Route path={match.path}>

                <Container className="cc-container">
                    <Row>
                        <Table hover className="cc-table">
                        <thead>
                            <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>24h %</th>
                            <th>7d %</th>
                            <th>Market Cap</th>
                            <th>Volume (24h)</th>
                            <th>Circulating Supply</th>
                            <th>Last 30 Days</th>
                            </tr>
                        </thead>

                        {currencies &&
                            currencies.map((item, index) =>
                                <tbody>
                                    <tr>
                                        <td>{index + 1}</td>
                                        <td><Image src={item.logo} width="38" roundedCircle /> {item.name}</td>
                                        <td>{item.pairs}</td> HERE I WANT TO FETCH DATA
                                    </tr>
                                </tbody>
                            )
                        }
                        </Table>
                    </Row>
                </Container>     
                
                </Route>
            </Switch>
        </div>
    )
}

export default Start

Answer 1

也許為價格信息創建組件？

// PriceInformation component
const PriceInformation = ({ ticker }) => {
  const [priceInfo, setPriceInfo] = useState(null)
  
  useEffect(() => {
    getCurrencyData(ticker)
  }, [])

  const getCurrencyData = async (ticker) => {
    try {
      const response = await KrakenService.getByTicker(ticker)
      setPriceInfo(Object.values(response.data.result)[0].c[0]);
      // return Object.values(response.data.result)[0].c[0]
    } catch (err) {
      console.log(err)
    }
  }

  return (
    // your code for ui
  )
}

// Start component
const Start = () => {
  // code ...
  return (
    <div className='Start'>
            <Switch>
                <Route path={`${match.path}/:currencyId`}>
                    test
                </Route>
                <Route path={match.path}>

                <Container className="cc-container">
                    <Row>
                        <Table hover className="cc-table">
                        <thead>
                            <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>24h %</th>
                            <th>7d %</th>
                            <th>Market Cap</th>
                            <th>Volume (24h)</th>
                            <th>Circulating Supply</th>
                            <th>Last 30 Days</th>
                            </tr>
                        </thead>

                        {currencies &&
                            currencies.map((item, index) =>
                                <tbody>
                                    <tr>
                                        <td>{index + 1}</td>
                                        <td><Image src={item.logo} width="38" roundedCircle /> {item.name}</td>
                                         
                                        { /* <td>{item.pairs}</td> HERE I WANT TO FETCH DATA */ }
                                        <td><PriceInformation ticker={item.pairs}/></td>
                                    </tr>
                                </tbody>
                            )
                        }
                        </Table>
                    </Row>
                </Container>     
                
                </Route>
            </Switch>
        </div>
   
  )
}