如何在映射時停止渲染每個數據文件的反應組件

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