React：渲染一个数据数组

Posted 2023-02-22

【中文标题】React：渲染一个数据数组

【英文标题】：React: rendering an Array of Data

【发布时间】：2021-12-16 12:33:09

【问题描述】：

处理我的第一个 react 项目，但在如何循环并将我的数据呈现到前端方面没有任何进展。

我正在使用 axios 从 mysql 数据库中获取股票代码列表，对于其中的每一个，我再次使用 axios 从外部网站抓取一些值。

参见下面的代码 sn-p：

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>
        )
    )

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

【问题讨论】：

“没有运气”是什么意思？正在发生什么，与您预期发生的情况相比如何？另外，person 是在哪里定义的？

我的错，已编辑。

我一直在关注一些使用数组的教程，但运气不好，我既没有提到我希望的输出，也没有提到控制台中记录的任何错误。

我认为你需要使用 useEffect 钩子来获取数据和状态变量来显示数据。

【参考方案1】：

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

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

或者简单地说：

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

附：我也没有看到你试图渲染数组的部分代码

【参考方案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>)