Javascript 返回包含该特定元素的完整数组

我正在尝试在React中创建一个词汇表组件，它允许我只过滤特定单元学习所需的词汇表术语。我有两个不同的数据数组，一个用于术语表术语，另一个用于单元。这是我的词汇表数据文件：

 {
        id: 1,
      order: 1,
      term: "Mario",
      content: "It's a meeee"
    },
    {
        id: 2,
      order: 2,
      term: "Luigi",
      content: "Okie dokie!"
    },
    {
        id: 3,
      order: 3,
      term: "Peach",
      content: "Thank you, Mario!"
    },
    {
        id: 4,
      order: 4,
      term: "Bowser",
      content: "No one asks for a trap faster than a plumber!"
    },
    {
        id: 5,
      order: 5,
      term: "Ganondorf",
      content: "How dare you attempt to wound the Demon King!"
    }

const units = [
    {
        order: 1,
        glossaryTermsRequired: [1,2,3]
    },
    {
        order: 2,
        glossaryTermsRequired: [4,5]
    }
]

这是我的单位数据文件：

 {
        id: 1,
      order: 1,
      term: "Mario",
      content: "It's a meeee"
    },
    {
        id: 2,
      order: 2,
      term: "Luigi",
      content: "Okie dokie!"
    },
    {
        id: 3,
      order: 3,
      term: "Peach",
      content: "Thank you, Mario!"
    },
    {
        id: 4,
      order: 4,
      term: "Bowser",
      content: "No one asks for a trap faster than a plumber!"
    },
    {
        id: 5,
      order: 5,
      term: "Ganondorf",
      content: "How dare you attempt to wound the Demon King!"
    }

const units = [
    {
        order: 1,
        glossaryTermsRequired: [1,2,3]
    },
    {
        order: 2,
        glossaryTermsRequired: [4,5]
    }
]

现在，这是我的术语表组件：

const Glossary = ({ glossaryId, glossaryTerm }) => {
    const [isOpen,setIsOpen]=useState(false)
   
    
    
    useEffect(()=>{
        insertGlossaryTerm()
    })
   
  return (
    <>
      <span onClick={()=>setIsOpen(true)} className="glossaryTerm">{glossaryTerm}</span>
      <Sidebar closeSidebar={()=>setIsOpen(false)} isOpen={isOpen}/>
    </>
  );

const Glossary=（{glossaryId，glossaryTerm}）=>{
常量[isOpen，setIsOpen]=useState（false）
useffect（（）=>{
insertGlossaryTerm（）
})
返回(
setIsOpen（true）}className=“glossaryTerm”>{glossaryTerm}
setIsOpen（false）}isOpen={isOpen}/>
);

词汇表组件有两个支柱，id和术语字符串。我的目标是单击术语表，并在侧栏中显示所需的术语，这些术语将在单击时打开。例如，如果我点击术语Bowser，我如何显示所需单元的所有术语？（4,5单元2）

谢谢大家

const Glossary=（{glossaryId，glossaryTerm}）=>{
常量[isOpen，setIsOpen]=useState（false）；
常量[sidebarTerms，setSidebarTerms]=useState（[]）；
useffect（（）=>{
if（等参线）
insertGlossaryTerm（）
}，[isOpen]）
常量insertGlossaryTerm=（）=>{
设unit=units.find（u=>u.glossaryTermsRequired.indexOf（4）>=0）；
若有（单位）{
让termArray=unit.glossaryTermsRequired.map（id=>elements[id].term）；
setSidebarTerms（终端阵列）；
}
}
返回(
setIsOpen（true）}className=“glossaryTerm”>{glossaryTerm}
setIsOpen（false）}isOpen={isOpen}terms={sidebarTerms}/>
);

说明：

• 已创建管理相关术语的状态。这是一个字符串列表
• 单击

  span

  时，侧栏打开
• 当

  isOpen

  状态更改时，将触发useEffect。搜索相关术语并将其存储在相关状态
• 状态与边栏相连，因此它通过道具接收相关术语，准备显示

要使其工作，您需要在我的示例中创建一个名为

elements

的全局对象，这是一个键值JSON对象，其中键是元素的

id

，值是元素本身

例如：

{
'1': {
id:1，
订单：1，
术语：“马里奥”，
内容：“这是一个meeee”
},
'2': {
id:2，
订单：2，
术语：“路易吉”，
内容：“好的
},
...
}

这避免了应用程序在整个元素列表中循环查找具有正确id的元素

然后，您还需要使

单元

对象可见

改进：

• 可以在insertGlossaryTerm（）之前而不是在isOpen（）函数之前触发
• 如果一个术语可以包含多个单位，则需要将.find函数替换为.filter

---

我不明白背后的逻辑。因此，如果我单击“Bowser”，算法应该理解Bowser的id==4，然后找到该单词在units数组中的位置并提取这些值？确切地说，如果我单击Bowser，我希望看到该数组中的所有其他词汇表，因此（4,5=Bowser和Ganndorf），如果您使用了find方法，单位应该在数组中，而不是json对象，对吗？@Robozombie是的，.find和.filter都是数组的函数。所以单位需要是一个元素数组。在您的例子中，元素是您在问题中描述的单元对象（因此使用

顺序

和

所需的术语

键），谢谢您的回答。在useEffect中有一个无限循环，即使你在数组中传递了isOpen。我注意到，有一次我用glossarydso将indexOf改为indexOf，indexOf中的4没有问题，但是如果你传递

glossaryd

params，就会出现无限循环？很奇怪。。。你能把你的代码贴在提琴上吗？修复了，我不得不解析一个单词ID，它是一个字符串。谢谢你的帮助，现在工作完美无瑕