编写 GET 请求以在 mongodb 中搜索多个属性（React、Node.js）

Question

我一直在尝试在我的 Node.js React 应用程序中使用 db.collections.find 函数，该函数用于搜索和雇用教师来学习某个学科。我想做的是向用户展示 3 个选择框。第一个用于教师的位置，第二个用于教师的科目（数学、文学等），第三个用于教师的工作对象类型（中学生或大学生）。用户选择他想要的选项，屏幕右侧就会出现具有所选属性的教师。 这就是搜索框现在的样子：

const Main = () => {
    const [subject, setSubject] = useState('');
    const [status, setStatus] = useState('');
    const [district, setDistrict] = useState('');


    const handleChange1 = (event) => {
        setSubject(event.target.value);
        console.log("new subject: ", event.target.value)
    };

    const handleChange2 = (event) => {
        setStatus(event.target.value);
        console.log("new status: ", event.target.value)
    };

    const handleChange3 = (event) => {
        setDistrict(event.target.value);
        console.log("new district: ", event.target.value)
    };

    return (
        <div className="row" style={{ marginLeft: 0, marginRight: 0, marginTop: 0 }}>
            <div className="col-md-3 search-box-container">
                <div className="search-box container">
                    <div className="col-md-11 search-bubble">
                        <h3 className="search-text" style={{ paddingTop: 5 }}>subject</h3>

                        <FormControl fullWidth>
                            <InputLabel id="subject-select-input-label">subject</InputLabel>
                            <Select
                                labelId="subject-select-input-label"
                                id="subject-select-input"
                                defaultValue='null'
                                value={subject}
                                label="subject"
                                onChange={handleChange1}
                                
                            >
                                <MenuItem value={'null'}>all</MenuItem>
                                <MenuItem value={'math'}>math</MenuItem>
                                <MenuItem value={'literature'}>literature</MenuItem>
                                <MenuItem value={'history'}>history</MenuItem>
                                <MenuItem value={'geography'}>geography</MenuItem>
                                <MenuItem value={'physics'}>physics</MenuItem>
                                <MenuItem value={'biology'}>biology</MenuItem>
                                <MenuItem value={'chemistry'}>chemistry</MenuItem>
                            </Select>
                        </FormControl>

                        <h3 className="search-text">status</h3>

                        <FormControl fullWidth>
                            <InputLabel id="status-select-input-label">status</InputLabel>
                            <Select
                                labelId="status-select-input-label"
                                id="status-select-input"
                                defaultValue='null'
                                value={status}
                                label="status"
                                onChange={handleChange2}
                                
                            >
                                <MenuItem value={'null'}>all</MenuItem>
                                <MenuItem value={'school student'}>school student</MenuItem>
                                <MenuItem value={'university student'}>university student</MenuItem>
                            </Select>
                        </FormControl>

                        <h3 className="search-text">location</h3>

                        <FormControl fullWidth>
                            <InputLabel id="district-select-input-label">region</InputLabel>
                            <Select
                                labelId="district-select-input-label"
                                id="district-select-input"
                                defaultValue='null'
                                value={district}
                                label="location"
                                onChange={handleChange3}
                                
                            >
                                <MenuItem value={'null'}>all</MenuItem>
                                <MenuItem value={'option1'}>option1</MenuItem>
                                <MenuItem value={'option2'}>option2</MenuItem>
                                <MenuItem value={'option3'}>option3</MenuItem>
                                <MenuItem value={'option4'}>option4</MenuItem>
                                <MenuItem value={'option5'}>option5</MenuItem>
                            </Select>
                        </FormControl>

                    </div>
                </div>
            </div>

            <div className="col-md-9 tutor-list row">
                <TutorList subject={subject} status={status} district={district} />
            </div>
        </div>
    )
}

导师列表（过滤后的导师应该出现在其中）：

const TutorList = (props) => {
    const [tutors, setTutors] = useState([])

    useEffect(() => {
        const fetchTutors = async () => {
            const data = await axios.get(`/api/v1/user/${props.subject}/${props.status}/${props.district}`)

            setTutors(data.data.users)
        }
        fetchTutors()
    }, [props])

    return (
        <Fragment>
            {tutors.map((tutor) => (
                ...
            ))}
        </Fragment>
    )
}

后端：

exports.search = async (request, response, next) => {
    const subjectName = request.params.subject
    const statusName = request.params.status
    const districtName = request.params.district

    const users = await User.find({
        subject: subjectName, 
        district: districtName, 
        students: statusName
    })

    if (!users) {
        return next(
            new ErrorResponse(`User with these parameters doesn't exist`, 404)
        )
    }

    response.status(200).json({ success: true, users: users })
}

如您所见，我尝试使用参数来实现此目的，但很快意识到其中一个字段可能为空并且它不起作用。那么我还应该做什么呢？ 我只是想要一个请求在后端应该是什么样子的大概例子，我会自己挖掘剩下的部分。希望能朝正确的方向推动，因为我显然看不到任何其他解决方案。 预先感谢！

Answer 1

前端

const data = await axios.get(`/api/v1/user/${props.subject}`, {
  params: {
    subject: props.subject,
    status: props.status,
    district: props.district
  }
})

后端：

exports.search = async (request, response, next) => {
    const subjectName = request.query.subject
    const statusName = request.query.status
    const districtName = request.query.district
    // ...
})