我无法通过 map() 函数获取数组数据数组作为道具

Question

我的 content.js 组件中有 Array of Array 数据，它应该服务于我的父组件 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;

问题是浏览器一直显示“无法读取未定义的属性'类别'”。我尝试了在互联网上找到的许多可能性，但没有用。有时它会说“无法读取未定义的属性 'title'”，但我习惯于在 React 中传递道具。我不明白在这种情况下发生了什么。有人可以告诉我如何解决这个问题吗？我真的很感激。

Answer 1

您的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 只是一个对象 ({}) 而不是对象数组 ([{}])。

Answer 2

我复制了您的代码并正确显示了项目。每次遇到“未定义”时，您都需要控制台记录内容并查看父组件是否找到它。您的内容格式与 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} /> 和 常量Groups = ({ item: { category, track1, track2, track3 } }) => (...) 我得到了 'category' 道具，但它没有通过轨道嵌套对象映射来为每个道具选择“标题”和“文本”。