尝试在映射数组内呈现 API 调用

Question

我正在制作股票 Web 应用程序。

我正在存储一个虚假用户的“帐户”数组，方法是映射它并将其返回到 table。

但是，我想使用数组中的“符号”对 API 进行提取调用。

并显示当前股票价值是多少。

这有助于用户比较“TotalCost”与股票当前价值相比有多少。

这是我目前所拥有的

 const [account, setAccount] = useState([
        {
           "Symbol": 'AAPL',
            "Shares": 1,
           "TotalCost": 130,
        },
        {
            "Symbol": 'TSLA',
             "Shares": 1,
             "TotalCost": 1500,
         },
   
    ])


                            <table>
                                <tbody>
                                    {account.map((stocks)=> {
                                        const {Symbol , Shares, TotalCost} = stocks;
                                        return (
                                            <tr>
                                              <td>{Symbol}</td>
                                              <td>{Shares}</td>  
                                              <td>${TotalCost}</td>
                                              <td>
                                              {() => fetch("https://finnhub.io/api/v1/quote?symbol=" + Symbol + "&token=12345678910" )
                                              .then(res=> res.json())
                                              .then(data =>{

                                           //how do I render data.c inside my table <td></td> tag 
                                                return JSON.stringify(data.c)
                                              })}
                                              </td> 
                                            </tr>
                                        )
                                    })}
                                </tbody>
                            </table>

Answer 1

'React' 方法，以及执行您正在寻找的正确方法如下：

初始化一个空的结果状态。
Return 第一次渲染时空白 table。
获取 useEffect() 挂钩中的数据。
查询完成后更新状态。
使用结果状态渲染数据。

如果您不熟悉 useEffect 钩子（或一般的钩子），请查看 React docs for useEffect。

执行此操作的组件如下所示：

import { useState, useEffect } from "react";

function Stocks() {
  const [account, setAccount] = useState([
    {
      Symbol: 'AAPL',
      Shares: 1,
      TotalCost: 130,
    },
    {
      Symbol: 'TSLA',
      Shares: 1,
      TotalCost: 1500,
    },
  ]);

  const [results, setResults] = useState([]);

  useEffect(() => {
    const fetchedResults = [];

    account.map(({Symbol, Shares, TotalCost}) => {
      fetch("https://finnhub.io/api/v1/quote?symbol=" + Symbol + "&token=12345678910")
      .then((res) => res.json())
      .then((data) => fetchedResults.push({
        Symbol,
        Shares,
        TotalCost,
        Content: data.c
      }));
    });

    setResults(fetchedResults);
  }, [])

  return (
    <table>
      <tbody>
       {results.map(({Symbol, Shares, TotalCost, Content}) => (
         <tr>
           <td>{Symbol}</td>
           <td>{Shares}</td>  
           <td>${TotalCost}</td>
           <td>{Content}</td>
         </tr>
       ))                         
      </tbody>
    </table>
  )
}

解释：

useEffect()：当使用[]（空数组）的依赖参数调用时，钩子内的回调仅在组件渲染后调用一次，这是应该发生 HTTP 请求等副作用的时候。
results：results 存储在状态中，因为我们希望组件在获取结果时重新呈现，这就是状态的用途。

尝试在映射数组内呈现 API 调用

Trying to render an API call inside of a mapped Array

javascript

jsx

twitter-bootstrap

reactjs

react-redux