為什么它不能顯示在reactJS的搜索中？

我的問題是：我想問我是否搜索“計算機科學”并且出現“編程語言”子層部分，但是如果您搜索子層中的部分，例如“HTML”和“CSS”，它不會出現或可以'不，這是為什么呢？我在 reactJS 中的編碼需要修復什么？

這是我的 json 檔案：

layers :[
    {
      key: "1",
      title: "Computer Science",
      expanded: false,
      subLayer: [
        {
          key: "a",
          title: "Programming Language",
          expanded: false,
          subLayer: [
            {
              key: "a.1",
              title: "HTML",
              expanded: false,
              subLayer: [],
            },
            {
              key: "a.2",
              title: "CSS",
              expanded: false,
              subLayer: [],
            },
          ],
        },
      ],
    },
  ]

代碼：

import data from './Data'

const checked = (e) => { }

function List(props) {
  const filteredData = data.layers.filter((el) => {
    if (props.input === '') {
      return el
    }
    return el.title.toLowerCase().includes(props.input) || el.subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0
  }) 

  return (
    <Accordion allowMultipleExpanded allowZeroExpanded className="text-sm">
      {filteredData.map((list) => (
        <AccordionItem key={list.key}>
          <AccordionItemHeading>
            <AccordionItemButton>
              <input
                type="checkbox"
                className="mx-2 text-sm"
                value="false"
                onClick={(e) => e.stopPropagation()}
                onChange={checked}
              />
              {list.title}
              <WorkspacesIcon className="WorkspacesIcons" />
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            {list.subLayer.length !== 0 ? (
              <>
                {list.subLayer.map((listDetails) => (
                  <Accordion allowMultipleExpanded allowZeroExpanded>
                    <AccordionItem>
                      <AccordionItemHeading>
                        <AccordionItemButton>
                          <input
                            type="checkbox"
                            className="mx-2"
                            value="false"
                            onClick={(e) => e.stopPropagation()}
                            onChange={checked}
                          />
                          {listDetails.title}
                        </AccordionItemButton>
                      </AccordionItemHeading>
                      <AccordionItemPanel />
                      <AccordionItemPanel>
                        {listDetails.subLayer.length !== 0 ? (
                          <>
                            {listDetails.subLayer.map((listDetails1) => (
                              <AccordionItem>
                                <AccordionItemHeading>
                                  <AccordionItemButton>
                                    <input
                                      type="checkbox"
                                      className="mx-2"
                                      value="false"
                                      onClick={(e) => e.stopPropagation()}
                                      onChange={checked}
                                    />
                                    {listDetails1.title}
                                  </AccordionItemButton>
                                </AccordionItemHeading>
                                <AccordionItemPanel />
                              </AccordionItem>
                            ))}
                          </>
                        ) : (
                          ''
                        )}
                      </AccordionItemPanel>
                    </AccordionItem>
                  </Accordion>
                ))}
              </>
            ) : (
              ''
            )}
          </AccordionItemPanel>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

圖片：

如果我撰寫代碼 reactJS 部分filteredData，這部分是否有任何錯誤：

const filteredData = data.layers.filter((el) => {
    if (props.input === '') {
      return el
    }
    return el.title.toLowerCase().includes(props.input) || el.subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0
  }) 

uj5u.com熱心網友回復：

查看您的代碼，您只是基于第一層標題（例如：計算機科學）和第一個子層標題（例如：編程語言）進行過濾。您需要添加另一個條件來查找第二個子圖層。根據您的代碼，您的回傳行將是：

return el.title.toLowerCase().includes(props.input) || el.subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0 || el.subLayer[0].subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0 

當你有多個陣列時，為了讓你更加動態，你可以這樣做：

  return (
      el.title.toLowerCase().includes(props.input.toLowerCase()) ||
      el.subLayer.findIndex((x) => x.title.toLowerCase().includes(props.input.toLowerCase())) >= 0 ||
      el.subLayer
        .map(
          (x) =>
            x.subLayer.findIndex((x) => x.title.toLowerCase().includes(props.input.toLowerCase())) >= 0,
        )
        .includes(true)
    )

標籤：javascript 反应 json

上一篇：展開后回傳聯合型別的實體

下一篇：延時佇列我在專案里是怎么實作的？