Получение ошибки как «TypeError: results.map не является функцией»

В коде React при попытке сопоставить результаты API я не могу получить данные. Вот код для справки.

App.js

export const AdminPanel = () => {
  const classes = useStyles();

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

  const profileData = async () => {
    try {
        const res = await axios.get("https://randomuser.me/api/?results=10");
        setResults(res)
    } catch(err) {
        console.info(err)
    }
}

useEffect(() => {
    profileData()
}, [])

  return (
    <TableContainer component = {Paper}>
      <Table className = {classes.table} aria-label = "simple table">
        <TableHead>
          <TableRow>
            <TableCell>First Name</TableCell>
            <TableCell align = "right">Last Name</TableCell>
            <TableCell align = "right">Address</TableCell>
            <TableCell align = "right">Photo</TableCell>
            <TableCell align = "right">Email</TableCell>
            <TableCell align = "right">DOB</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>

            {results.map((person) => {
                console.info('PERSON', person)
            })}

        </TableBody>
      </Table>
    </TableContainer>
  );
}

Несмотря на то, что результаты объявлены как массив, все равно выдается ошибка. Я где-то ошибаюсь. Какое может быть подходящее решение?

можете ли вы консоль журналировать результаты и поделиться

— 24.12.2020 23:58

После того, как console.info показывает сначала [], а затем все данные

— 25.12.2020 00:05

javascript reactjs

24.12.2020 23:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

523

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ты почти там. Ваш вызов axios должен немного измениться. Вот как это исправить:

import React from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const [results, setResults] = React.useState([]);

  const profileData = async () => {
    try {
      const res = await axios
        .get("https://randomuser.me/api/?results=10")
        .then((result) => result.data.results);
      setResults(res)
    } catch (err) {
      console.info(err);
    }
  };

  React.useEffect(() => {
    profileData();
  }, []);

  return (
    <div className = "App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {results.map((person) => {
        console.info("PERSON", person);
      })}
    </div>
  );
}

Обратите внимание на эту часть:

const res = await axios
        .get("https://randomuser.me/api/?results=10")
        .then((result) => result.data.results);

Также имейте в виду, что console.info("PERSON", person); внутри вашей функции возврата на самом деле ничего не будет отображаться на странице, она будет выведена на консоль. Просто хотел прояснить это.

Песочница: https://codesandbox.io/s/exciting-shockley-9m5vj?file=/src/App.js

25.12.2020 00:04

setResults(res.results) должен выполнить задание

25.12.2020 00:07