错误 - 在反应搜索组件中呈现多个实例

Posted 2023-02-22

【中文标题】错误 - 在反应搜索组件中呈现多个实例

【英文标题】：Error - Rendering multiple instances in react search component

【发布时间】：2021-09-09 21:10:29

【问题描述】：

我正在构建一个搜索组件，用户在其中输入值，它会过滤一些虚拟数据并呈现结果供用户查看。问题是当我在搜索字段中输入一个字符时，我会得到我输入的每个字符的整个数据数组。例如，数组中有 4 个数据字符串，所以如果我在搜索栏中输入两个字符，那么我的结果是 8。

Here is the code and the problem duplicated: 感谢您的帮助。

【参考方案1】：

答案如下，基本上，代码是从CompanyInfoList component 加载到一个额外的地图中。我还有一个在同一个组件中不需要的 useContext，因此我将其删除并将results.map 从useContext setState hook 替换为filtered.map。 filters 是需要从CompSearch 传递到CompanyInfoList. 的道具我做的最后一个更改是删除RenderList component 并删除serachList component 到CompanyInfoList 中的return RenderList

CompSearch.js

import React, useContext, useState from "react";
import CompanyInfoList from "./CompanyInfoList";
import  CompListContext  from "./CompListContext";

const CompSerach = () => 
    // const [input, setInput] = useState('');
    const [results, setResults] = useContext(CompListContext);
    const [searchField, setSearchField] = useState("");
    const [searchShow, setSearchShow] = useState(false);

    const filtered = results.filter((res) => 
        return (
        res.name.toLowerCase().includes(searchField.toLowerCase()) ||
        res.employee.toLowerCase().includes(searchField.toLowerCase()) ||
        res.date.toLowerCase().includes(searchField.toLowerCase()) ||
        res.amount.toLowerCase().includes(searchField.toLowerCase())
        );
      );
      
    const handleChange = (e) => 
        setSearchField(e.target.value);
        if (e.target.value === "") 
          setSearchShow(false);
         else 
          setSearchShow(true);
        
      ;

      function searchList() 
        if (searchShow) 
          return <CompanyInfoList filtered=filtered />;
        
      

  return (
    <>
      <div>
        <input
          type="search"
          placeholder="search Company Title"
          //   input="input"
          //   value=input
          onChange=handleChange
          // onChange=handleChange
        />
      </div>
      searchList()
    </>
  );
;

export default CompSerach;

CompanyInfoList.js

import Results from "./Results";

const CompanyInfoList = ( filtered ) => 
  const fltr = filtered.map((result) => (
    <Results
      key=result.id
      name=result.name
      employee=result.employee
      date=result.date
      amount=result.amount
    />
  ));
  return <div>fltr</div>;
;
export default CompanyInfoList;