在 React Native 中使用 forEach 顯示 API 結果

Question

我正在嘗試顯示來自 api 的數據，但無法正確使用 forEach 方法同時顯示所有數據。 API 工作正常。 這是代碼：

import React, {useEffect, useState} from 'react'
import { Text, View, ActivityIndicator, ScrollView } from 'react-native'
import axios from '../../utils/axios'
//import CurrencyPair from '../../CurrencyPair'
function HomeScreen() {
    const [data, setData] = useState([])
    const [isLoading, setIsloading] = useState(true)

   
    useEffect(() => {
        const fetchpairs = async() => {
            const result = await axios.get('/v3/accounts/{AccountId}/pricing?instruments=EUR_USD%2CUSD_CAD')
            console.log(result.data)
            setData(result.data)
            setIsloading(false)
            
        }
        fetchpairs()
    }, [])

    
if(isLoading) {
    return (
        <ActivityIndicator size="large"/>
    )
}
else
return (
    <ScrollView>
        {[data].map((data) => (
            data.forEach(data =>{
           <Text>{JSON.stringify(data.prices[0].instrument)}
            {JSON.stringify(data.prices[0].closeoutAsk)}
            {JSON.stringify(data.prices[0].closeoutBid)}
            
            </Text>
            })
))}
    </ScrollView>
)
}

export default HomeScreen

Answer 1

Map 已經在處理 forEach function

<ScrollView>
        {[data].map((item,i) => {
           
         return(<Text key={i}>{JSON.stringify(item.prices[0].instrument)}
            {JSON.stringify(item.prices[0].closeoutAsk)}
            {JSON.stringify(item.prices[0].closeoutBid)}
            
            </Text>
            )}
   )}
    </ScrollView>