我無法通過map()函式獲取ArrayofArraydata'作為道具-有解無憂

我的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 } }) => (...) 我得到了“類別”道具，但它沒有映射到軌道嵌套物件來為每個選擇“標題”和“文本”。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/398764.html

標籤：javascript 数组反应目的

上一篇：如何將屬性隨機分布在一定數量的物件上？

下一篇：從同一個父類的另一個類訪問物件