我的content.js 组件中有资料作为阵列阵列，它应该为我的父组件Catalogues.js提供服务，以显示作为道具传递给子组件Groups.js 的资料。 content.js 档案是：
const content = [
[
{
id: 1,
category: 'Hymns',
track1:
[
{
title: 'Song 1',
text: 'When peace like a river attendeth my way',
},
],
track2:
[
{
title: 'Song 2',
text: 'It is well with my soul',
},
],
track3:
[
{
title: 'Song 3',
text: 'Praise the Lord, praise the Lord',
},
],
},
],
[
{
id: 2,
category: 'Rock',
track1:
[
{
title: 'Song 1',
text: 'Open the eyes of my heart',
},
],
track2:
[
{
title: 'Song 2',
text: 'Here is our god',
},
],
track3:
[
{
title: 'Song 3',
text: 'Becaue he lives',
},
],
},
],
[
{
id: 3,
category: 'High Life',
track1:
[
{
title: 'Song 1',
text: 'I will bless thye lord at all times',
},
],
track2:
[
{
title: 'Song 2',
text: 'Who is like unto thee',
},
],
track3:
[
{
title: 'Song 3',
text: 'Blesed be the name of the Lord',
},
],
},
],
];
export default content;
子 Group.js 组件是：
import React from 'react';
import { FaLevelDownAlt } from 'react-icons/fa';
import './groups.css';
const Groups = ({ item: { category, track1, track2, track3 } }) => (
<div className="groups-container">
<div className="category">
<p className="categoryArrows">
<FaLevelDownAlt color="#2b74b7" size={35} />
</p>
<p className="categoryTitle">{category}</p>
</div>
<div className="alltracks">
<div className="track">
<h1>{track1.title}</h1>
<p>{track1.text}</p>
</div>
<div className="tracks">
<h1>{track2.title}</h1>
<p>{track2.text}</p>
</div>
<div className="track">
<h1>{track3.title}</h1>
<p>{track3.text}</p>
</div>
</div>
</div>
);
export default Groups;
而父组件 Catalogues.js 是：
import React, { useEffect } from 'react';
import Groups from '../../components/Groups';
import content from './content';
const Catalogues = () => (
<div className="catalogues-section">
<div className="catalogues-heading">
<h1 className="catalogues-text">Songs in the service</h1>
</div>
<div className="catalogues-container">
{content.map((item, index) => (
<Groups key={index} item={item} />
))}
</div>
</div>
);
export default Catalogues;
问题是浏览器一直显示“Cannot read property 'category' of undefined”。我尝试了在互联网上找到的许多可能性，但都无济于事。有时它会说“无法读取未定义的属性 'title'”，但我习惯于在 React 中传递道具。我不明白在这种情况下发生了什么。有人能告诉我如何解决这个问题吗？我会很感激。
uj5u.com热心网友回复：
你content的格式可能不是你想要的——你使用了一堆不必要的东西[]，它们在你不需要的地方创建了额外的阵列。如果您将内容更改为以下内容，您的代码应该可以正常作业：
const content = [
{
id: 1,
category: 'Hymns',
track1:
{
title: 'Song 1',
text: 'When peace like a river attendeth my way',
},
track2:
{
title: 'Song 2',
text: 'It is well with my soul',
},
track3:
{
title: 'Song 3',
text: 'Praise the Lord, praise the Lord',
},
},
{
id: 2,
category: 'Rock',
track1:
{
title: 'Song 1',
text: 'Open the eyes of my heart',
},
track2:
{
title: 'Song 2',
text: 'Here is our god',
},
track3:
{
title: 'Song 3',
text: 'Becaue he lives',
},
},
{
id: 3,
category: 'High Life',
track1:
{
title: 'Song 1',
text: 'I will bless thye lord at all times',
},
track2:
{
title: 'Song 2',
text: 'Who is like unto thee',
},
track3:
{
title: 'Song 3',
text: 'Blesed be the name of the Lord',
},
},
];
请注意，例如，每个现在track1都只是一个物件 ( {}) 而不是物件阵列 ( [{}])。
uj5u.com热心网友回复：
我复制了您的代码并正确显示了项目。每次遇到“未定义”时，您都需要控制台记录内容并查看父组件是否找到了它。您的内容格式与 map() 函式通过它映射无关，因为它将通过物件阵列映射，就像前面提到的@jnpdx 一样。因此，利用他的格式并执行 document.write(content) 以查看是否获得 [object object]。如果你明白了，那么你可以继续这个答案。否则，您汇入的“内容”也可能是错误的。这是正确的内容格式：
const content = [
{
id: 1,
category: 'Hymns',
track1:
{
title: 'Song 1',
text: 'When peace like a river attendeth my way',
},
track2:
{
title: 'Song 2',
text: 'It is well with my soul',
},
track3:
{
title: 'Song 3',
text: 'Praise the Lord, praise the Lord',
},
},
{
id: 2,
category: 'Rock',
track1:
{
title: 'Song 1',
text: 'Open the eyes of my heart',
},
track2:
{
title: 'Song 2',
text: 'Here is our god',
},
track3:
{
title: 'Song 3',
text: 'Because he lives',
},
},
{
id: 3,
category: 'High Life',
track1:
{
title: 'Song 1',
text: 'I will bless the lord at all times',
},
track2:
{
title: 'Song 2',
text: 'Who is like unto thee',
},
track3:
{
title: 'Song 3',
text: 'Blessed be the name of the Lord',
},
},
];
然后假设您通过document.write(content)获得[object object]，在 Catalogues.js 中通过以下方式更改您的：
import React, { useEffect } from 'react';
import Groups from '../../components/Groups';
import content from './content';
const Catalogues = () => (
<div className="catalogues-section">
<div className="catalogues-heading">
<h1 className="catalogues-text">Songs in the service</h1>
</div>
<div className="catalogues-container">
{content.map((item, index) => (
<Groups key={index} category={item.category} title1={item.track1.title} text1={item.track1.text} title2={item.track2.title} text2={item.track2.text} title3={item.track3.title} text3={item.track3.text}/>
))}
</div>
</div>
);
export default Catalogues;
因为您在物件中嵌套了物件。
Then change your Groups.js by:
import React from 'react';
import { FaLevelDownAlt } from 'react-icons/fa';
import './groups.css';
const Groups = ({ category, title1, text1, title2, text2, title3, text3 }) => (
<div className="groups-container">
<div className="category">
<p className="categoryArrows">
<FaLevelDownAlt color="#2b74b7" size={35} />
</p>
<p className="categoryTitle">{category}</p>
</div>
<div className="alltracks">
<div className="track">
<h1>{title1}</h1>
<p>{text1}</p>
</div>
<div className="tracks">
<h1>{title2}</h1>
<p>{text2}</p>
</div>
<div className="track">
<h1>{title3}</h1>
<p>{text3}</p>
</div>
</div>
</div>
);
更多的是关于迭代的缘故。因为做你喜欢做的
<Groups key={index} item={item} />和 constGroups = ({ item: { category, track1, track2, track3 } }) => (...)
我得到了“类别”道具，但它没有映射到轨道嵌套物件来为每个选择“标题”和“文本”。
0 评论