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

Question

我正在制作一个股票网络应用程序。

我通过映射存储一个假用户的“帐户”数组并将其返回到一个表中。

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

并显示当前股票的价值。

这有助于用户比较“总成本”与股票当前值的比较。

这是我目前所拥有的

 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

“反应”的方式，也是做你正在寻找的正确方式如下：

1. 初始化一个空的结果状态。
2. 在第一次渲染时返回一个空白表。
3. 在 useEffect() 挂钩中获取数据。
4. 查询完成后更新状态。
5. 使用结果状态呈现数据。

如果您不熟悉 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 存储在 state 中，因为我们希望组件在获取结果时重新呈现，这就是 state 的用途。