能够 data.map 用于 fetch() 响应但在数组上

Question

我有以下 useEffect 代码，我知道它适用于看起来像这样 [{"name":"Agilent Technologies Inc","symbol":"A","industry":"Health Care"},{"name":"American Airlines Group","symbol":"AAL","industry":"Industrials"},{"name":"Advance Auto Parts","symbol":"AAP","industry":"Consumer Discretionary"}] 的响应。

但它不适用于以下类型的响应{"timestamp":"2020-03-23T14:00:00.000Z","symbol":"AAL","name":"American Airlines Group","industry":"Industrials","open":10.9,"high":11.36,"low":10.01,"close":10.25,"volumes":55494100}。我可以调整代码以使其工作的最佳方式是什么？它正在抛出 Unhandled Rejection (TypeError): data.map is not a function.

const [stockData, setStockData] = useState([]); 
const [query, setQuery] = useState("AAL"); 


   useEffect(() => {
        fetch(`PRIVATE_URL_${query}`)
        .then(res => res.json())
        .then(data => 
          data.map(stocks => {
            return {
              name: stocks.name,
              symbol: stocks.symbol,
              industry: stocks.industry,
              open: stocks.open,
              high: stocks.high,
              low: stocks.low,
              close: stocks.close,
              volume: stocks.volume
            };
          })
        )
        .then(stocks => setStockData(stocks)); 

  }, [query]);

Answer 1

我不确定你的措辞是否有误，但 .map 是专门针对数组的，查看你的代码，你尝试遍历一个对象数组，但你没有对象数组你只有一个对象。只需删除地图并在 return 中使用 data 而不是 stocks.

useEffect(() => {
    fetch(`PRIVATE_URL_${query}`)
    .then(res => res.json())
    .then(data => 
        return {
          name: data.name,
          symbol: data.symbol,
          industry: data.industry,
          open: data.open,
          high: data.high,
          low: data.low,
          close: data.close,
          volume: data.volume
        };
    )
    .then(stocks => setStockData(stocks));

}, [查询]);

Answer 2

我不明白你的问题，但是.map是Array的一个方法，return是一个新的Array。所以如果你的数据是 Array 并且你想映射它。你可以试试这个：

     useEffect(() => {
        fetch(`PRIVATE_URL_${query}`)
        .then(res => res.json())
        .then(data => 
          return data.map(stocks => {
            return {
              name: stocks.name,
              symbol: stocks.symbol,
              industry: stocks.industry,
              open: stocks.open,
              high: stocks.high,
              low: stocks.low,
              close: stocks.close,
              volume: stocks.volume
            };
          })
        )
        .then(stocks => setStockData(stocks)); 
  }, [query]);

能够 data.map 用于 fetch() 响应但在数组上

Being able to data.map for fetch() responses but on arrays

fetch

reactjs

use-effect