数组数组的 ReactJS 实时搜索过滤器答案

【问题标题】：ReactJS realtime search filter of array of arrays数组数组的 ReactJS 实时搜索过滤器
【发布时间】：2021-06-24 19:57:36
【问题描述】：

我正在尝试为一长串项目创建实时过滤搜索，项目采用数组的形式，其中包含带有字符串和对象的数组，如：

const items = [
      ["cats", [
        {name: "name", img: "img/img.jpg"},
        {name: "name2", img: "img2/img.jpg"},
        ...
      ]],
      ["dogs", [
        {name: "name", img: "img/img.jpg"},
        {name: "name2", img: "img2/img.jpg"},
        ...
      ]],
      ...
]

我正在尝试按名称值过滤它。

我尝试的是：

export default function Page({ items }) {
const [searchTerm, setSearchTerm] = React.useState("");
const [searchResults, setSearchResults] = React.useState(items);
const handleChange = event => {
    setSearchTerm(event.target.value);
}

useEffect(() => {
    var f=0, results = []
    while (f < items.length){
        if(items[f][1].includes(searchTerm)){
            results.push(result)
        }
        f++
    }
    
    setSearchResults(results);
}, [searchTerm]);

return (
        <div>
            <input
                type="text"
                placeholder="Search"
                value={searchTerm}
                onChange={handleChange}
            />
            {searchResults.map((cl, index) => (
                <div key={index}>
                  <h2>{cl[0]}</h2>
                  <ScrollContainer> 
                    {cl[1].map((item, i) => (
                      <h3>{item.name}</h1>
                    ))}
                  </ScrollContainer>
                </div>
             ))}

但它会引发错误：

ChunkLoadError: 加载块 0 失败。

【问题讨论】：

不要使用index作为迭代map函数的键。它会降低您的应用程序速度，也是奇怪错误的根源。 reactjs 将使用它进行比较，从您的 Array Items 中添加一个唯一的字符串名称。

标签： javascript reactjs search filter

【解决方案1】：

首先，请修复您的数据模型。当它是可数的时候，为什么你使用 Array of Array，把它变成这样：

const items = [
  { name: "name", img: "img/img.jpg", type: "cat" },
  { name: "name2", img: "img2/img.jpg", type: "cat" },
  ...
  { name: "name", img: "img/img.jpg", type: "dog" },
  { name: "name2", img: "img2/img.jpg", type: "dog" },
  ...
]

关于您的实时搜索，请使用fuse.js，您可以将其添加到您的项目中，并通过简单的配置为您过滤，特别是fuse.js 对上述数据模型非常满意。就试一试吧。你会很高兴的。

【讨论】：

@m4tt，感谢您的澄清。

【解决方案2】：

我建议像 AmerllicA 所说的那样修复您的数据，但如果您有这样的当前数据格式，您可以像这样转换它。

const items = [
      ["cats", [
        {name: "name", img: "img/img.jpg"},
        {name: "name2", img: "img2/img.jpg"},
      ]],
 ]

const object = Object.fromEntries(items);

这会将您的数据转换成这样：

{
  "cats":[{"name":"name","img":"img/img.jpg"},{"name":"name2","img":"img2/img.jpg"}]
}

所以如果你想找到猫或狗

你可以做的是：

const searchTerm = 'cats'
const foundKey = Object.keys(object).find(key => key === searchTerm)
const foundObject = object[foundKey];

foundObject 的输出是：

"[{"name":"name","img":"img/img.jpg"},{"name":"name2","img":"img2/img.jpg"}]"

如果你想找到猫的具体名字会是这样的

const searchNameOfFoundObject = 'name';
const findNameOfFoundObject = foundObject.find(value => value.name === searchNameOfFoundObject)

那么 findNameOfFoundObject 的输出将是：

{"name":"name","img":"img/img.jpg"}

但我建议您在后端进行搜索，如果这是一个大数据，这将成为您前端的负担，这将使您的应用程序变慢。您应该只在 api 上发送 searchTerm，您需要基于 searchTerm 的数据将是 api 响应，这将在后端处理得更快，您的前端响应应用程序将更加优化和用户友好。

【讨论】：