第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

將過濾器應(yīng)用于列表并顯示數(shù)據(jù)

將過濾器應(yīng)用于列表并顯示數(shù)據(jù)

慕森卡 2023-08-10 14:38:06
前端: 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>
查看完整描述

1 回答

?
胡子哥哥

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊

只是一個(gè)意見:我會稍微修改前端和后端以支持組合請求。您可以使用不同的參數(shù)將 JavaScript 對象(作為 JSON)發(fā)送到 API,并在后端控制器函數(shù)中應(yīng)用檢查。


所以基本上,而不是單獨(dú)


 const findByType = () => {...}

    const findByRevenue = () => {...}

    const findByEmployeesNumber = () => {...}

   

我會使用(狀態(tài)可以是一個(gè)整體對象,如下例所示,也可以是分離的,然后在發(fā)送到 API 時(shí)組裝成一個(gè)對象)


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

        });  

    }

然后在控制器中,我將破壞查詢對象并對其運(yùn)行查詢


查看完整回答
反對 回復(fù) 2023-08-10
  • 1 回答
  • 0 關(guān)注
  • 119 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號