如何处理React JS中的搜索查询？

问题描述

我已经启动并运行了节点js服务器，并且我这样处理查询请求：

controller.js

const getUsers = async (req,res,next) => {
    const age = req.query.age || 1;
    const lessage = req.query.minAge || 1000000000;
    const search = req.query.s || '';
    let users;
    try {
        users = await User.find({ age: { $gt: age,$lt: lessage },name: { $regex: search } });
    } catch (e) {
        console.log('Could not find users : ' + e);
        next(e);
    }
    res.json(users);
};

我检查url中是否有查询值，如果不使用默认值，请在mongoose find（）方法中使用该查询值。

现在我的问题是我该如何处理或基本上发送这些查询，以单选按钮，输入和复选框做出反应？我试图在没有任何库的情况下进行处理，并且每次我错过任何东西或陷入错误中。

我尝试过这样：

    const what = loc.length < 1 ? '?' : '&';
    const [ name,setName ] = React.useState('');
    const [ searchName,setSearchName ] = React.useState('');
    const [ radio,seTradio ] = React.useState('');
    const [ place,setPlace ] = React.useState('');
<select
                onChange={(e) => {
                    setPlace(e.target.value);
                    setLoc((prev) => prev + place);
                }}
            >
                <option value="">Select place</option>
                <option value={`${what}place=us`}>US</option>
                <option value={`${what}place=uk`}>UK</option>
            </select>
            {place}
            <form
                onChange={(e) => {
                    seTradio(e.target.value);
                    setLoc((prev) => prev + radio);
                }}
            >
                <input type="radio" name="gender" value={`${what}age=22`} /> Age over 22 <br />
                <input type="radio" name="gender" value={`${what}ageMin=22`} /> Age lower than 22 <br />
            </form>
            {radio}
            <input
                type="text"
                value={name}
                onChange={(e) => {
                    setName(e.target.value);
                }}
            />

没有关于如何在react中发送具有不同选项的多个查询请求的教程或文章。

那么我该如何使用react js处理向后端发送查询请求？

解决方法

我用react useState钩子这样处理查询值的第一个设置值：

    const [ name,setName ] = React.useState('');
    const [ age,setAge ] = React.useState('');
    const [ place,setPlace ] = React.useState('');

            <select
                onChange={(e) => {
                    setPlace(e.target.value);
                }}
            >
                <option value="">Select place</option>
                <option value="us">US</option>
                <option value="uk">UK</option>
            </select>
            {place}
            <br />
            <form
                onChange={(e) => {
                    setAge(e.target.value);
                }}
            >
                <input type="radio" name="gender" value="ageMax=22" /> Age over 22 <br />
                <input type="radio" name="gender" value="ageMin=22" /> Age lower than 22 <br />
            </form>
            {age}
            <br />
            <input
                type="text"
                value={name}
                onChange={(e) => {
                    setName(e.target.value);
                }}
            />
           {name}

然后，我为Link的道具提供了这样的条件：

<Link to={handleSearch}>Filter</Link>

    const handleSearch = () => {
        if (place.length === 0 && name.length === 0) {
            return `?${age}`;
        }

        if (age.length === 0 && name.length === 0) {
            return `?place=${place}`;
        }

        if (age.length === 0 && place.length === 0) {
            return `?s=${name}`;
        }

        if (age.length === 0) {
            return `?s=${name}&place=${place}`;
        }
        if (place.length === 0) {
            return `?s=${name}&${age}`;
        }
        if (name.length === 0) {
            return `?${age}&place=${place}`;
        }

        return `?s=${name}&${age}&place=${place}`;
    };