时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“名称”，无法遍历对象数组

javascript - TypeError：无法读取未定义的属性“名称”，无法遍历对象数组

问题描述

我是反应的初学者，当我使用 map 函数遍历从 category.json 导入的对象数组时，请帮我解决这个问题，我将对象的道具传递给我的 Category 组件，所以当我的类别页面正在渲染它给类型错误：无法读取未定义的属性“名称”。

应用程序.js

import React, { useState } from 'react';
import category from './data/categories.json';
import Categ from './Components/Categ';

function App() {
  const [data, setData] = useState(category);
  return (
    <div className="App">
      {data.map(item => (
        <Categ key={item.id} name={item.name} desc={item.description} />
      ))}
    </div>
  );
}

export default App;

`

分类.js

import React from 'react';

function Categ({ props }) {
  console.log(props);

  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.desc}</p>
    </div>
  );
}

export default Categ;

类别.json

[
  {
    "id": "fgsa2142fa",
    "name": "Keyboards",
    "description": "Buy different keyboard from any brand available"
  },
  {
    "id": "xasgy42fa",
    "name": "Headphones",
    "description": "Find best-fit for your ears"
  }
]

标签： javascripthtmlreactjs

解决方案

当你的组件第一次渲染时，你的data对象是未定义的。您可以通过多种方式轻松解决此问题：

  1. 可选链接：?. map仅当数据不虚假时，表示法才会调用函数
function App() {
  const [data, setData] = useState(category);
  return (
    <div className="App">
      {data?.map(item => (
        <Categ key={item.id} name={item.name} desc={item.description} />
      ))}
    </div>
  );
}
  1. 条件渲染：
function App() {
  const [data, setData] = useState(category);
  return (
    <div className="App">
      {data && data.map(item => (
        <Categ key={item.id} name={item.name} desc={item.description} />
      ))}
    </div>
  );
}

或者：

function App() {
  const [data, setData] = useState(category);
  return (
    <div className="App">
      {data ? data.map(item => (
        <Categ key={item.id} name={item.name} desc={item.description} />
      )) : <p> No data </p>}
    </div>
  );
}

本质上，data && data.map在data?.map这里做同样的事情。

  1. @Patryk 的建议：
(data || []).map

推荐阅读