TypeError：无法读取未定义的属性（读取“客户”）

Question

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. 我正在使用 axios 和 useEffect 从 api 获取数据
2. 我通过数据的响应数组进行映射，如果数组中没有信息，则应用程序中断
3. 如何仅映射数组中特定数量的项目？
4. 例如，如果我的数据数组中有 3 个项目，它将在浏览器上从返回语句向下显示 但是...当它映射所有 3 个时，它将继续重试并中断，因此“客户未定义”，因为没有更多客户 5.我尝试做 {item.customer.firstName 并得到 undefined first name 的错误}

有什么办法可以解决这个问题？谢谢！

enter image description here

Answer 1

map 不是这样工作的。将这些参数传递给回调：

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

index 是迭代 information 数组时的当前索引，item 是该索引处的元素。它不是整个数组的另一个副本。所以不要这样：

item[index].customer.firstName

你会这样做：

item.customer.firstName

---

顺便说一句，在 React 中迭代数组以输出列表时，您可能希望将 key 添加到顶级元素。如果您愿意，可以使用 index 来实现此目的：

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

或者，如果 item 具有唯一标识符，那么您可以使用它并完全删除 index。

Answer 2

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
})

Answer 3

当您map() 一组项目时，您将分别处理每个item，因此您不需要index，您可以将index 用作key，阅读更多关于@987654321 @。

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