React：渲染數據數組

Question

在我的第一個 React 項目上工作，但在如何循環並將我的數據呈現到前端方面沒有取得任何進展。

我正在使用 axios 從 MySQL 數據庫獲取股票行情列表，對於每一個我再次使用 axios 從外部網站獲取一些值。

請參閱下面的代碼片段：

const fetchStocks = () => {
    let stocksList = []

    Axios.get('http://localhost:3001/fetchStocks').then((response) => {
        response.data.map((val, key) => {

            const url = 'https://www.tradegate.de/orderbuch.php?isin=' + val.stockTicker
            Axios.get(url).then((response) => {

                let $ = cheerio.load(response.data)
                let name = $('#col1_content h2')[0].children[0].data
                let last = $('#last')[0].children[0].data
                let delta = $('#delta')[0].children[0].data
                let high = $('#high')[0].children[0].data
                let low = $('#low')[0].children[0].data

                stocksList.push({
                    sId: val.sId,
                    stockName: name,
                    stockTicker: val.stockTicker,
                    stockLast: last,
                    stockDelta: delta,
                    stockHigh: high,
                    stockLow: low
                })
            })
        })
    })
}

當我做console.log(stocksList)我幾乎得到了我想要的：

[
{
        "sId": 3,
        "stockName": "Tesla Inc.",
        "stockTicker": "US88160R1014",
        "stockLast": "1 049,80",
        "stockDelta": "+8,90%",
        "stockHigh": "1 049,80",
        "stockLow": "966,90"
    },
    {
        "sId": 1,
        "stockName": "Apple Inc.",
        "stockTicker": "US0378331005",
        "stockLast": "128,00",
        "stockDelta": "-1,16%",
        "stockHigh": "130,28",
        "stockLow": "127,70"
    },
    {
        "sId": 2,
        "stockName": "Intel Corp.",
        "stockTicker": "US4581401001",
        "stockLast": "42,725",
        "stockDelta": "+0,78%",
        "stockHigh": "42,85",
        "stockLow": "42,37"
    }
]

我現在想做類似的事情：

{
    stocksList.map(stock => {
        return ( 
            <li key = {stock.sId}>{stock.stockName}</li>
        )
    })
}

對於數據庫中的每個條目，但到目前為止我沒有運氣並且不太明白我錯在哪里 - 我在猜測我如何設置數組？

Answer 1

由於您正在返回 JSX，您可能需要使用 () 大括號而不是 {}。

{
    stocksList.map(stock => (
        return ( 
            <li key = {stock.sId}>{stock.stockName}</li>
        )
    ))
}

或者干脆：

{
    stocksList.map(stock => <li key = {stock.sId}>{stock.stockName}</li>)
}

Answer 2

當組件安裝沒有，useEffect將被調用然后調用fetchStocks功能，終於在通過useState組件狀態從服務器獲取並提出數據

import React, { useState, useEffect } from 'react';

const FC = () => {
  const [stocksList, setStocksList] = useState([])

  const fetchStocks = () => {
      let list = []

      Axios.get('http://localhost:3001/fetchStocks').then((response) => {
          response.data.map((val, key) => {

              const url = 'https://www.tradegate.de/orderbuch.php?isin=' + val.stockTicker
              Axios.get(url).then((response) => {

                  let $ = cheerio.load(response.data)
                  let name = $('#col1_content h2')[0].children[0].data
                  let last = $('#last')[0].children[0].data
                  let delta = $('#delta')[0].children[0].data
                  let high = $('#high')[0].children[0].data
                  let low = $('#low')[0].children[0].data

                  list.push({
                      sId: val.sId,
                      stockName: name,
                      stockTicker: val.stockTicker,
                      stockLast: last,
                      stockDelta: delta,
                      stockHigh: high,
                      stockLow: low
                  })
              })
          })
      })

      setStocksList(list)
  }

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


  return stocksList.map(stock => <li key = {stock.sId}>{stock.stockName}</li>)
}