Возможность 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 - это метод Array и возвращает новый 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]);

Answer 2

Я не уверен, что вы ошиблись с вашей формулировкой, но .map специально для массивов, глядя на ваш код, вы пытаетесь перебрать массив объектов, но у вас нет массива объектов, у вас просто есть объект. Просто удалите карту и используйте 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)); 

}, [query]);