React：渲染一个数据数组答案

【问题标题】：React: rendering an Array of DataReact：渲染一个数据数组
【发布时间】：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 钩子来获取数据和状态变量来显示数据。

标签： javascript arrays reactjs axios

【解决方案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>)
}

【讨论】：