时间戳

首页 > 解决方案 > React：渲染一个数据数组

javascript - 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"
    }
]

chrome控制台输出截图

我现在想做类似的事情：

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

对于数据库中的每个条目，但到目前为止我没有运气，也不太明白我错在哪里 - 我在猜测我是如何设置数组的？

标签： javascriptarraysreactjsaxios

解决方案

由于您要返回 JSX，因此您可能希望使用 () 大括号而不是 {}。

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

或者简单地说：

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

PS我也没有看到您尝试渲染数组的代码的一部分

推荐阅读