如何在不使用 React 中的映射的情况下访问嵌套数组的元素？

Question

我需要从嵌套在数组中的对象访问特定元素，我正在使用 React 功能组件。

 const accordionItems = [
    { id: 'Releases',
     items: [
      {item: '123 / first show / 14/3/19', data: track1}, 
      {item: '456 /second show / 31/3/19', data: track2}, 
      {item: '789 / third show / 7/4/19', data: track3} ]
    },
    
    { id: 'Radio',
      items: [
      {item: '123 / first show / 14/3/19', data: track1}, 
      {item: '456 /second show / 31/3/19', data: track2}, 
      {item: '789 / third show / 7/4/19', data: track3} ]
    },

    { id: 'Contact',
      items: [
      {item: '123 / first show / 14/3/19', data: track1}, 
      {item: '456 /second show / 31/3/19', data: track2}, 
      {item: '789 / third show / 7/4/19', data: track3} ]
    }
  ];

这是存储我的对象的代码。我需要访问每个特定的 'data' 以提供给音频播放器的参数。

我的尝试如下：

   <AudioPlayer 
      src={accordionItems[1].items.data[1]}
   />

我遵循了我从这里的其他几个问题中研究的语法，但它似乎发送了以下错误：

Cannot read property '1' of undefined

据我所知，accordionItems 包含三个可以通过 accordionItems[x] 访问的对象，然后从那里输入项目数组并记下哪个数据点将被馈送到音频播放器的源。

有没有人有解决方案来帮助我访问这个特定的数据点？我研究过的大多数答案都涉及使用 map 函数，我认为从长远来看，这不适合我构建此应用程序的目标。

谢谢！

Answer 1

我猜你的 accordionItems 可能会随着时间的推移而变化，比如它可能被初始化为空状态，或者项目的数量可能会动态变化（如果你可以添加更多代码来显示你在做什么).

我不确定你的逻辑是什么，但你总是可以创建逻辑来显示你没有对 index 进行硬编码的项目。 map 在许多用例中是一个非常方便的函数，也许它不适合你。例如，如果有帮助，您可以考虑以下内容。

const accordionItems = [
  {
    id: 'Releases',
    items: [
      {item: '123 / first show / 14/3/19', data: track1}, 
      {item: '456 /second show / 31/3/19', data: track2}, 
      {item: '789 / third show / 7/4/19', data: track3}
    ]
  },
  { 
    id: 'Radio',
    items: [
      {item: '123 / first show / 14/3/19', data: track1}, 
      {item: '456 /second show / 31/3/19', data: track2}, 
      {item: '789 / third show / 7/4/19', data: track3}
    ]
  },
  { 
    id: 'Contact',
    items: [
      {item: '123 / first show / 14/3/19', data: track1}, 
      {item: '456 /second show / 31/3/19', data: track2}, 
      {item: '789 / third show / 7/4/19', data: track3} 
    ]
  }
];

const getTrack = (options, type) => {
  const typeItem = options.find((item) => item.id === type);
  if(typeItem && typeItem.items && typeItems.length > 0) {
    // whatever logic you have to extract the track
    // you can use find or filter and similar functions
  }
  return null;
}

const Player = () => {
  // replace radio by anything else or you can even make it state/prop based
  const trackSource = getTrack(accordionItems, "radio");
  return (
   <>
     {
       trackSource ? <AudioPlayer src={trackSource} /> : <SourceDoesNotExist />;
     }
   </>
  )
}

Answer 2

<AudioPlayer 
      src={accordionItems[1].items.data[1]}
   />

应该是

<AudioPlayer 
      src={accordionItems[1].items[1].data}
   />

因为项目是一个数组，而不是数据。

Answer 3

这里的问题是您访问实际数组中数据的方式。

让我们解构您的查询：accordionItems[1].items.data[1]

首先，accordionItems[1] 是正确的，因为 accordionItems 是一个数组，您可以从中选择元素 1。

你访问 items，这也很好，但是你不能像那样从 items 中获取 data，因为 items 是一个数组。

你想要的最终结果是accordionItems[1].items[1].data

如何在不使用 React 中的映射的情况下访问嵌套数组的元素？

How to access an element of a nested array without using map in React?

javascript

reactjs

react-component

react-hooks