Saya punya pertanyaan tentang cara yang baik untuk menyelesaikan masalah ini yang saya miliki di Bereaksi. Saya perlu mengumpulkan mata uang dari API saya sendiri yang telah saya buat, yang berfungsi dengan baik dan saya mengulanginya dalam pernyataan pengembalian komponen React saya. Saat mengulangi, saya ingin menggunakan data "item.pairs" untuk digunakan sebagai argumen untuk pemanggilan metode (metode async) untuk mendapatkan informasi harga dan merendernya. Bagaimana ini bisa dicapai?

Saya menambahkan metode getCurrencyData, saya mencoba memanggilnya dalam pernyataan pengembalian di dalam loop, tetapi itu tidak akan berhasil, dan saya telah mencari ini dan tidak mungkin melakukannya dengan cara itu. Jadi bagaimana saya bisa melakukan ini?

Kode yang digunakan di bawah ini:

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
0
Marcus C 12 Mei 2021, 10:44

1 menjawab

Jawaban Terbaik

Mungkin membuat komponen untuk informasi Harga?

// 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>
   
  )
}
1
scovic 12 Mei 2021, 08:30