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

Question

前端： 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>

Answer 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);       

        });  

    }

然后在控制器中，我将破坏查询对象并对其运行查询