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

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，并在后端控制器函数中应用检查。所以基本上，而不是单独&nbsp;const findByType = () => {...}&nbsp; &nbsp; const findByRevenue = () => {...}&nbsp; &nbsp; const findByEmployeesNumber = () => {...}&nbsp; &nbsp;我会使用（状态可以是一个整体对象，如下例所示，也可以是分离的，然后在发送到 API 时组装成一个对象）&nbsp; &nbsp;const [searchParameters, setSearchParameters] = useState({&nbsp; &nbsp; &nbsp; &nbsp; type: '',&nbsp; &nbsp; &nbsp; &nbsp; revenue: '',&nbsp; &nbsp; &nbsp; &nbsp; employeesNumber: ''&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const onChangeSearchType = e => {&nbsp;&nbsp; &nbsp; &nbsp; const workingObject = {...searchParameters};&nbsp; &nbsp; &nbsp; const workingObject.searchType = e.target.value;&nbsp;&nbsp; &nbsp; &nbsp; setSearchParameters(workingObject);&nbsp; &nbsp;&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // same logic for onChangeRevenue and onChangeEmployeesNumber&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const handleFetchWithSearchParameters = () => {&nbsp; &nbsp; &nbsp; TutorialDataService.findByParameters(searchParameters)&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .then(response => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTutorials(response.data);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(response.data);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .catch(e => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(e);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp;&nbsp; &nbsp; }然后在控制器中，我将破坏查询对象并对其运行查询