我如何处理反应 js 中的搜索查询？

Question

我已经启动了我的节点 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 处理向后端发送查询请求？

Answer 1

我处理查询值首先使用 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}`;
    };

我如何处理反应 js 中的搜索查询？

How can I handle search queries in react js?

javascript

search

reactjs

mern

react-fullstack