Блог

 import React, { useState, useEffect } from 'react';
import axios from 'axios';

{const CustomerList = () => {
  const [information, setInformation] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (isLoading) {
      axios.get('').then((response) => {
        setInformation((prevInfo) => {
          return [...prevInfo, response.data];
        });
      });
    }
    return () => {
      setIsLoading(false);
    };
  }, [information, isLoading]);

  return (
    <>
      <h2>Name: </h2>
      {information.map((item, index) => (
        <div>
          <div>{item[index].customer.firstName}</div>
          <div>{item[index].customer.lastName}</div>
        </div>
      ))}
    </>
  );
};

export default CustomerList;
 

1. Я получаю данные из api для работы с использованием axios и useeffect
2. Я сопоставляю массив данных ответов, и если в массиве нет информации, приложение прерывается
3. Как я могу отобразить только определенное количество элементов в массиве?
4. Например, если у меня есть 3 элемента в моем массиве данных, он покажет их в браузере из инструкции return, НО… когда он сопоставит все 3, он продолжит повторную попытку и сломается, следовательно, «клиент не определен», потому что больше клиентов нет 5.Я попытался сделать {item.customer.FirstName и получил ошибку с неопределенным именем}

Есть какой-нибудь способ обойти это? Спасибо!

введите описание изображения здесь

Это не так map работает. С этими аргументами для обратного вызова:

 information.map((item, index) => ...
 

index является текущим индексом при итерации по information массиву и item элементом в этом индексе. Это не очередная копия всего массива. Так что вместо этого:

 item[index].customer.firstName
 

Ты бы просто сделал это:

 item.customer.firstName
 

Кроме того, при итерации по массиву для вывода списка в React вы захотите добавить a key в элемент верхнего уровня. Вы можете использовать index для этой цели, если хотите:

 {information.map((item, index) => (
    <div key={index}>
      ...
    </div>
))}
 

Или, если item у вас есть уникальный идентификатор, вы можете использовать его вместо этого и index полностью удалить.

item[index] это неверно, так item как в любом случае относится к элементу массива index .

Правильный Путь:

 const data = [1,2,3,4,5,6,7,8,9,10]

const mappedData = data.map((d, index) => {
    console.log("index is", index)
    console.log("d is", d)
    console.log("-----------------------------")
    return d
}) 

Что вы пытаетесь сделать:

 const data = [1,2,3,4,5,6,7,8,9,10]

const mappedData = data.map((d, index) => {
  console.log("index is", index)
  console.log("d[index] is", d[index]) //undefined since d is not an array 
  console.log("------------------------------")
  return d
}) 

Когда у вас map() массив элементов, вы обрабатываете каждый item отдельно, поэтому вам не нужно index , вы можете использовать index as key , подробнее о списках и ключах читайте здесь.

 {information.map((item, i) => (
  <div key={i}>
    <div>{item.customer.firstName}</div>
    <div>{item.customer.lastName}</div>
  </div>
))}