类型错误：无法读取未定义的属性'name'，无法循环访问对象数组

Question

我是react的初学者，请帮我解决这个问题当我使用map函数迭代从category.json导入的对象数组时，我将对象的props传递给我的category组件，因此当我的类别页面呈现时，它会给出TypeError:无法读取undefined的属性"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;

`

类别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对象未定义。你可以通过多种方法很容易地解决这个问题：

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

2. 条件渲染：

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

3. @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

为什么未定义

您在Category中以析构函数格式传递道具。它没有name密钥

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

在category中这样做

function Categ(props) {

并且在创建之前更好地验证data

data && data.map