嘗試在映射陣列內呈現API呼叫

我正在制作一個股票網路應用程式。

我通過映射并將其回傳到表中來存盤假用戶的“帳戶”陣列。

但是，我想使用陣列中的“符號”來對 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>

uj5u.com熱心網友回復：

“反應”方式，以及做你正在尋找的事情的正確方法如下：

1. 初始化一個空的結果狀態。
2. 在第一次渲染時回傳一個空白表。
3. 獲取useEffect()鉤子內的資料。
4. 查詢完成后更新狀態。
5. 使用結果狀態渲染資料。

如果您不熟悉useEffect鉤子（或一般的鉤子），請查看useEffect的React 檔案。

執行此操作的組件如下所示：

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 的用途。

標籤：javascript 反应 推特引导 反应还原 jsx

上一篇：需要將專案放在bootstrapreactjs的2個極端

下一篇：模態組件不顯示