Блог

Интерфейс:

  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 amp; ampersand to concatinate URL parameters
  return http.get(`/tutorials?type=${type}amp;country=${country}amp;creditscore=${creditscore}amp;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 =

Просто мнение: я бы немного изменил как интерфейс, так и серверную часть для поддержки комбинированных запросов. Вы можете отправить объект 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);       
        });  
    }
  

А затем в контроллере я бы уничтожил объект запроса и выполнял запросы к нему