Question

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

2021-06-22

90

javascript html reactjs

我是 React 的初学者，请帮助我解决这个问题当我使用 map 函数迭代从 category.json 导入的对象数组时，我将对象的 props 传递给我的 Category 组件，因此当我的类别页面呈现时，它给出 TypeError：无法读取未定义的属性“name”。`

App.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;

`

Categ.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;

category.json

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

Answer 1

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

可选链接：?. 表示法仅在数据不为假时才会调用 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>
  );
}

条件渲染：

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 在这里做同样的事情。

@Patryk 的建议：

(data || []).map

Answer 2

数据变量首次呈现为未定义，您也可以使用以下方法管理此问题：

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

Answer 3

Why undefined ?

You are passing the props as destruct format in Category. it does't have name key

您可以将 props 作为单个参数传递，而不是 destruct

在 category 中执行此类操作

function Categ(props) {

并且在 itreate 之前最好验证 data

data && data.map