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

Question

我正试图在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]
}
]

现在这是我的词汇表组件：

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}/>
</>
);

glossary组件采用两个道具，id和术语字符串。我的目标是点击词汇表，并在点击后打开的侧边栏中显示那些所需的术语。例如，如果我点击术语Bowser，我如何才能显示所需单元的所有术语？(4,5第二单元(

谢谢你们

Answer 1

const Glossary = ({ glossaryId, glossaryTerm }) => {
const [isOpen,setIsOpen]=useState(false);
const [sidebarTerms, setSidebarTerms] = useState([]);



useEffect(()=>{
if (isOpen)
insertGlossaryTerm()
}, [isOpen])
const insertGlossaryTerm = () => {
let unit = units.find(u => u.glossaryTermsRequired.indexOf(4)>=0);
if (unit) {
let termArray = unit.glossaryTermsRequired.map(id => elements[id].term);
setSidebarTerms(termArray);
}
}

return (
<>
<span onClick={()=>setIsOpen(true)} className="glossaryTerm">{glossaryTerm}</span>
<Sidebar closeSidebar={()=>setIsOpen(false)} isOpen={isOpen} terms={sidebarTerms}/>
</>
);

说明：

• 已经创建了一个管理相关术语的状态。这是一个字符串列表
• 单击span时，侧边栏将打开
• useEffect会随着isOpen状态的变化而触发。搜索相关术语并将其存储在相关状态
• 状态与边栏相连，因此它通过道具接收相关术语，准备显示

要使其工作，您需要在我的示例中创建一个名为elements的全局对象，这是一个键值JSON对象，其中键是元素的id，值是元素本身。

示例：

{
'1': {
id: 1,
order: 1,
term: "Mario",
content: "It's a meeee"
},
'2': {
id: 2,
order: 2,
term: "Luigi",
content: "Okie dokie!"
},
...
}

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

然后，您还需要使units对象可见。

改进：

• 您可以在insertGlossaryTerm((之前触发，而不是在isOpen((函数之前触发
• 如果一个项可以在多个单元中，则需要用.filter替换.fund函数