将过滤器应用于列表并显示数据

Posted 2023-03-07

【中文标题】将过滤器应用于列表并显示数据

【英文标题】：Apply filters to a list and show data

【发布时间】：2021-03-01 22:43:43

【问题描述】：

前端：

 const [searchParameters, setSearchParameters] = useState(
    type: "",
    country:"",
    
  );

  const onChangeSearchType = e => 
    const workingObject = ...searchParameters;
    workingObject.searchType = e.target.value; 
    setSearchParameters(workingObject);   
  ;

  const onChangeSearchCountry = e => 
    const workingObject = ...searchParameters;
    workingObject.searchCountry = e.target.value; 
    setSearchParameters(workingObject);
  ;


const handleFetchWithSearchParameters = () => 
    TutorialDataService.findByParameters(searchParameters)       
      .then(response =>  
        setTutorials(response.data); 
        console.log(response.data);       
      )       
      .catch(e =>  
        console.log(e);       
      );  
  

return()之后：

<Form.Control as="select" defaultValue=""
            type="text"
            className="form-control"
            id="country"
            required
            value=searchParameters.country
            onChange=onChangeSearchCountry
            name="country">
            <option>Nigeria</option>
            <option>Ghana</option>
            <option>Kenya</option>
            <option>Senegal</option>
                 </Form.Control>
                 <Form.Control as="select" defaultValue=""
            type="text"
            className="form-control"
            id="type"
            required
            value=searchParameters.type
            onChange=onChangeSearchType
            name="type">
            <option>Agricultural</option>
            <option>Manufacturing</option>
            <option>Industrial</option>
            <option>Livestock</option>
            <option>Service Industry</option>
                 </Form.Control>
 <div className="input-group-append">
<button 
className="btn btn-outline-secondary" 
type="button" 
onClick=handleFetchWithSearchParameters
       Search 
</button>

Service.js：

import http from "../http-common.js";
const findByParameters = searchParameters => 
  // This is the destructuring syntax I've linked above
  const  type, country, creditscore, interest  = searchParameters;

  // Here we use & ampersand to concatinate URL parameters
  return http.get(`/tutorials?type=$type&country=$country&creditscore=$creditscore&interest=$interest`); 
; 

export default 
 
  findByParameters
;

Controller.js：

// Retrieve all Industries from the database.
exports.findAll = (req, res) =>  
const type = req.query.type ; 
let condition = type ?  type :  [Op.like]: %$type %   : null;

Tutorial.findAll( 
where: condition, 
order: [   ['createdAt', 'DESC'] ] 
)     
.then(data =>  res.send(data);     
)     
.catch(err =>  
res.status(500).send( message:err.message || "Some error occurred while retrieving tutorials."
       );     
); ;

因此，我的网络应用程序的此页面用于显示保存在我的数据库中的所有公司的列表。

我创建了一个过滤器，允许您通过findByType 仅显示特定类型的过滤器。

我想插入其他过滤器，例如：findByRevenue、findByEmployeesNumber。

不知道是否应该为每种情况在前端和后端都编写新函数？还是有更聪明的方法？

此外，过滤器不必单独工作，它们还需要组合在一起以改进您的搜索。我希望我已经很好地解释了它应该如何工作，它就像任何电子商务网站一样。

编辑：我按照建议更改了代码，但我仍然遇到问题。它不再让我使用输入表单。事实上，请求是空的，例如：

type = ""
country = ""

我觉得input.value =有问题

【参考方案1】：

只是一个意见：我会稍微修改前端和后端以支持组合请求。您可以使用不同的参数将 javascript 对象（作为 JSON）发送到您的 API，并在后端控制器函数中应用检查。

所以基本上，而不是分开

 const findByType = () => ...
    const findByRevenue = () => ...
    const findByEmployeesNumber = () => ...
   

我会使用（状态可以是一个整体对象，如下例所示，或者在发送到 API 时分离然后组装成一个对象）

   const [searchParameters, setSearchParameters] = useState(
        type: '',
        revenue: '',
        employeesNumber: ''
      );
    
    const onChangeSearchType = e =>  
      const workingObject = ...searchParameters;
      const workingObject.searchType = e.target.value; 
      setSearchParameters(workingObject);   
    ;
    
    // same logic for onChangeRevenue and onChangeEmployeesNumber
    
    const handleFetchWithSearchParameters = () => 
      TutorialDataService.findByParameters(searchParameters)       
        .then(response =>  
          setTutorials(response.data); 
          console.log(response.data);       
        )       
        .catch(e =>  
          console.log(e);       
        );  
    

然后在控制器中，我会破坏查询对象并针对它运行查询

【讨论】：

谢谢，但我还是有一些问题。