时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性（读取“客户”）

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

问题描述

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 并得到未定义名字的错误}

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

在此处输入图像描述

标签： javascriptarraysreactjsapiarray.prototype.map

解决方案

这不是如何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完全删除。

推荐阅读