reactjs - 映射函数在一个组件上渲染所有图像，而不是每个组件一个图像

问题描述

我正在对我的数据库进行外部 API 调用，该数据库包含存储在 firebase 中的图像的 URL。当我映射数组时，它会在每个元素上渲染所有六个图像，而不是像我想要的那样每个元素一个。我的代码如下：

import React from 'react';
import { gql } from 'apollo-boost';
import { useQuery } from '@apollo/react-hooks';
import Collapsible from 'react-collapsible';

import Isp from '../components/Isp';
import SearchGroup from '../components/SearchGroup';
import Seek from '../components/Seek';

import plus from '../images/icon_plus.png';
import minus from '../images/icon_minus.png';

const GET_ALL_LINKS = gql`
  {
    allLinks {
      category
      imageLink
    }
  }
`;

const Section = () => {
  const { data } = useQuery(GET_ALL_LINKS);

  const categories = data && data.allLinks.map(link => link.category);
  const allCategories =
    categories &&
    categories.filter((item, index) => categories.indexOf(item) === index);

  const images = data && data.allLinks.map(image => image.imageLink);
  const allImages =
    images && images.filter((item, index) => images.indexOf(item) === index);
  console.log(allImages);

  return (
    <div>
      {allCategories &&
        allCategories.map(category => (
          <ul key={category} className='searchmenu'>
            <Collapsible
              trigger={
                <span className={`outer-span`}>
                  {allImages &&
                    allImages.map(image => (
                      <img src={image} alt='' key={image} />
                    ))}
                  {category}
                  <span
                    className='inner-span'
                    style={{
                      backgroundImage: `url(${plus})`,
                      backgroundRepeat: 'no-repeat',
                      border: 'none',
                      float: 'right'
                    }}
                  ></span>
                </span>
              }
              triggerWhenOpen={
                <span className={`outer-span`}>
                  {allImages &&
                    allImages.map(image => (
                      <img src={image} alt='' key={image} />
                    ))}
                  {category}
                  <span
                    className='inner-span'
                    style={{
                      backgroundImage: `url(${minus})`,
                      backgroundRepeat: 'no-repeat',
                      border: 'none',
                      float: 'right'
                    }}
                  ></span>
                </span>
              }
            >
              <Isp category={category} />
              <SearchGroup category={category} />
              <Seek category={category} />
            </Collapsible>
          </ul>
        ))}
    </div>
  );
};

export default Section;

这是它在屏幕上的呈现方式。

理想情况下，我希望每个类别获得一张独特的图像。

使用数据集更新：allCategories：

所有图片：

标签： reactjs

首先你制作一张地图 allCategories

allCategories.map(category => (

然后你为 allImages 做一个循环

allImages.map(image => (

因此所有图像都显示在所有类别中。

但是如果你做了一些条件而不是使用第二个循环，比如获取以下类别的图像并在没有任何循环的情况下显示它。我认为这将解决您的问题

如果您可以提供 allCategories 数组和 allImages 数组的数据集，我可以进一步帮助您。

reactjs - 映射函数在一个组件上渲染所有图像，而不是每个组件一个图像

问题描述

解决方案

推荐阅读