Неперехваченная ошибка типа: transactions.map не является функцией в reacts JS

#reactjs

Вопрос:

Я пытаюсь получить API с помощью Axios, пожалуйста, помогите мне решить следующие проблемы. Я новичок в react js и получаю неперехваченную ошибку типа: transactions.map не является функцией в reactes JS.

 import React, { useState, useEffect } from 'react';
import axios from './axios';
import './App.css';


function App() {
 const [transactions, setTransactions] = useState({transactions:[]});

 useEffect(() => {
   const fetchUrl = 'https://reqres.in/api/users?page=2';

   async function fetchData(){
    const request = await axios.get(fetchUrl);

    setTransactions(request.data);
    
    return request;
  }
  fetchData();
}, []);

console.log(transactions);


return (
  <div className="wrapper">
   <h2>Transactions</h2>
   <p>{transactions.total_pages}</p>
   <i>{transactions.map(datas => (
     <h2>{datas.data.avatar}</h2>
   ))}</i>
  
 </div>
);
}

export default App;

1. Состояние, с которого вы начинаете, является объектом, {transactions: []} и затем вы пытаетесь вызвать .map() этот объект, но .map() это всего лишь метод для массивов. В зависимости от вашего варианта использования, вы, вероятно, захотите useState([]) . Вам необходимо назвать переменные состояния в форме объекта с useState()

2. ПРИВЕТ, спасибо за ценный ответ. Я внес изменения, как вы упомянули выше. Проблема все та же. Любые другие способы устранения этой ошибки

Ответ №1:

Как сказал Энди, состояние ваших транзакций является объектом и .map() является методом в массивах. Итак, сделайте его в виде массива useState([]) и используйте его напрямую как transactions.map() или без изменения вашего начального состояния transactions.transactions.map() .

1. ПРИВЕТ, спасибо за ценный ответ. Я внес изменения, как вы упомянули выше. Проблема все та же. Любые другие способы устранения этой ошибки.

2. Здравствуйте, я пробовал что-то подобное, оно работает нормально. Вы можете проверить ссылку на изолированную среду кода: codesandbox.io/s/zen-ride-8sz7i .

Ответ №2:

Измените свое состояние с:

 const [transactions, setTransactions] = useState({transactions:[]})

Для:

 const [transactions, setTransactions] = useState([]);

Надеюсь, это поможет вам, удачи

1. Привет, я внес изменения, вот если бы я прокомментировал функцию map. он отображает общее количество страниц. если я снова раскомментирую функцию map, та же ошибка

2. Подождите несколько минут, я запускаю свой сервер React Dev, чтобы посмотреть, в чем проблема

Ответ №3:

Поскольку вы извлекаете данные из API, используйте тернарный оператор ? , на всякий случай, например, axios все еще извлекает данные transactions?.data?.map . Попробуйте следующий пример, он должен работать:

 import React, { useState, useEffect } from "react";
import axios from "./axios";
import "./App.css";

function App() {
    const [transactions, setTransactions] = useState([]);

    useEffect(() => {
       const fetchUrl = "https://reqres.in/api/users?page=2";

       async function fetchData() {
       const request = await axios.get(fetchUrl);

       setTransactions(request.data);

       return request;
      }
      fetchData();
    }, []);

   console.log(transactions);

   return (
        <div className="wrapper">
           <h2>Transactions</h2>
           <p>{transactions.total_pages}</p>
           <i>
               {transactions?.data?.map((datas) => (
                   <h2>{datas.avatar}</h2>
             ))}
          </i>
       </div>
   );
 }
export default App;

Дайте мне знать, работает это или нет, удачи