如何在映射时停止渲染每个数据文件的反应组件

Question

所以我有一个 js 文件，我在其中存储我所有的数据，我将 map 出那个 js 文件来渲染我想要渲染的数据。 为了阻止我自己渲染所有数据，我做了这样它只在每次 title = element.id 时有条件地渲染，因此它应该只渲染具有标题的 id 特定 id 的数据。 然而，尽管这可行，但它最终会呈现一堆空的 div，因此这会降低我的实际数据。 我的数据被下推的图像正如您所看到的，空的 div 已将我的实际数据下推到我的模态内部很多地方。

有谁知道如何阻止这种情况发生？ （如何通过停止渲染空白 div 来摆脱上面的空间？）

我的模态文件看起来像这样

const Modal = ({ handleClose, id, title, subtitle, description, techStack, image, github, devpost }) => {
    let isId = false;
    return (
        <Backdrop onClick={handleClose}>
            <motion.div 
                onClick={(e) => e.stopPropagation()}
                className='modal-ics'
                variants={dropIn}
                initial='hidden'
                animate='visible'
                exit='exit'
                
            >
                <div className='w-full flex flex-col items-center'>
                    <ModalButton onClick={handleClose} label='Close'></ModalButton>
                    <div className='flex flex-col w-full h-full justify-between items-start'>
                        hello
       
                        {ICSData.map((element) => {
                            if (id == element.id) {
                                isId = true;
                            }

                            else {
                                isId = false;
                            }

                            return (
                                <div>
           
                                    { isId &&
                                        <div>
                                            <div className='modal-text-separator'>
                                                <h1 className='modal-title'>{element.title}</h1>
                                                <h3 className='modal-date'>{element.subtitle1}</h3>
                                                <p className='modal-description mt-2'>{element.description1}</p>
                                            </div>         
                                            { element.subtitle2 && 
                                                <div className='modal-text-separator'>
                                                    <h3 className='modal-date'>{element.subtitle2}</h3>
                                                    <p className='modal-description mt-2'>{element.description2}</p>
                                                </div>        
                                            }
                                            { element.subtitle3 && 
                                                <div className='modal-text-separator'>
                                                    <h3 className='modal-date'>{element.subtitle3}</h3>
                                                    <p className='modal-description mt-2'>{element.description3}</p>
                                                </div>        
                                            }
                                            { element.subtitle4 && 
                                                <div className='modal-text-separator'>
                                                    <h3 className='modal-date'>{element.subtitle4}</h3>
                                                    <p className='modal-description mt-2'>{element.description4}</p>
                                                </div>        
                                            }
                                            { element.subtitle5 && 
                                                <div className='modal-text-separator'>
                                                    <h3 className='modal-date'>{element.subtitle5}</h3>
                                                    <p className='modal-description mt-2'>{element.description5}</p>
                                                </div>        
                                            }
                                        </div>
                                      
                                    }
                                </div>                           
                            );
                        })}             
                    </div>                  
                </div>
            </motion.div>
        </Backdrop>
    )
}
export default Modal;

我的数据文件看起来像这样

import React from 'react'

const ICSData = [
  {
    id: "classes",
    title: "Classes",
    image: "InspiritAI.png" ,
    subtitle1: "very cool subtitle",
    description1:
        "this is a very cool description",
    subtitle2: "very cool subtitle",
    description2:
    "this is a very cool description",
    subtitle3: "very cool subtitle",
    description3:
        "this is a very cool description",
    subtitle4: "very cool subtitle",
    description4:
    "this is a very cool description",
    subtitle5: "very cool subtitle",
    description5:
        "this is a very cool description",
  },
  {
    id: "documentation-ds",
    title: "Documentation",
    image: "InspiritAI.png" ,
    subtitle1: "very cool subtitle",
    description1:
        "this is a very cool description",
    subtitle2: "very cool subtitle",
    description2:
    "this is a very cool description",
    subtitle3: "very cool subtitle",
    description3:
        "this is a very cool description",
    subtitle4: "very cool subtitle",
    description4:
    "this is a very cool description",
    subtitle5: "very cool subtitle",
    description5:
        "this is a very cool description",
  },
  {
    id: "file-reading-and-writing",
    title: "File Reading and Writing",
    image: "InspiritAI.png" ,
    subtitle1: "very cool subtitle",
    description1:
        "this is a very cool description",
    subtitle2: "very cool subtitle",
    description2:
    "this is a very cool description",
    subtitle3: "very cool subtitle",
    description3:
        "this is a very cool description",
    subtitle4: "very cool subtitle",
    description4:
    "this is a very cool description",
    subtitle5: "very cool subtitle",
    description5:
        "this is a very cool description",
  },
  {
    id: "object-concepts",
    title: "Object Concepts",
    image: "InspiritAI.png" ,
    subtitle1: "very cool subtitle",
    description1:
        "this is a very cool description",
    subtitle2: "very cool subtitle",
    description2:
    "this is a very cool description",
    subtitle3: "very cool subtitle",
    description3:
        "this is a very cool description",
    subtitle4: "very cool subtitle",
    description4:
    "this is a very cool description",
    subtitle5: "very cool subtitle",
    description5:
        "this is a very cool description",
  },
  {
    id: "uml-diagrams",
    title: "UML Diagrams",
    image: "InspiritAI.png" ,
    subtitle1: "very cool subtitle",
    description1:
        "this is a very cool description",
    subtitle2: "very cool subtitle",
    description2:
    "this is a very cool description",
    subtitle3: "very cool subtitle",
    description3:
        "this is a very cool description",
    subtitle4: "very cool subtitle",
    description4:
    "this is a very cool description",
    subtitle5: "very cool subtitle",
    description5:
        "this is a very cool description",
  },
  {
    id: "documentation-algorithms",
    title: "Documentation",
    image: "InspiritAI.png" ,
    subtitle1: "very cool subtitle",
    description1:
        "this is a very cool description",
    subtitle2: "very cool subtitle",
    description2:
    "this is a very cool description",
    subtitle3: "very cool subtitle",
    description3:
        "this is a very cool description",
    subtitle4: "very cool subtitle",
    description4:
    "this is a very cool description",
    subtitle5: "very cool subtitle",
    description5:
        "this is a very cool description",
  }
]
export default ICSData;

Answer 1

您可以通过仅调用 map function 直到某个 ID 来限制它

{ICSData.filter((item, idx) => idx < 5).map((element) => {...})}

然后，如果您想制作一个加载更多按钮，您还可以将 5 替换为控制该数字的变量。

Answer 2

你最终在不应该存在的地方有多个空 div 的原因在于你的映射返回语句：

                 {ICSData.map((element) => {
                            if (id == element.id) {
                                isId = true;
                            }

                            else {
                                isId = false;
                            }

                            return (
                                <div>
                                    { isId &&
                                        <div>
                                            <div className='modal-text-separator'>
                                     ...
                                     }
                                </div>
                            )
...

在这里，您仍然在创建一个 div，无论是否应该存在。 如果您的 ID 不匹配，最简单的解决方法是返回一个空元素，如下所示：

{ICSData.map(element => {
    if (id == element.id) {
        return (
          <YOUR_CODE />
        )
    } else {
        return <></>
    }
}

但是，遍历所有数据以显示一个元素可能不是最好的主意。 一些选择：

• 更改您的数据，使其不是数组，而是对象的 object，键是条目的 ID，值是数据的 rest（假设您的所有 ID 都是唯一的）
• 使用查找 function（再次假设您的 ID 是唯一的）

对于第二种解决方案，我只是 go，因为它不涉及更改您的数据，而且更直接。 但是，它比第一个解决方案慢，因为.find function 的复杂度为 O(n)，而第一个解决方案的复杂度为 O(1)。 如果您的数据很少，这可能无关紧要，但如果ICSData数组中的项目数量增加，则需要牢记这一点。

您可以使用一行来实现第二种解决方案：

const data = ICSData.find(element => id === element.id)
// Do whatever you want with this var in your component