时间戳

首页 > 解决方案 > 如何使用 MongoDB、Express、React 和 Node 查询 MongoDB 数据库？

node.js - 如何使用 MongoDB、Express、React 和 Node 查询 MongoDB 数据库？

问题描述

我终其一生都无法弄清楚如何同时使用 React、Express、Node 和 MongoDB 来查询 MongoDB 数据库并将该信息显示到 DOM 上。我的查询在硬编码时有效，但在使用前端文本输入时，它不起作用。这是代码：

反应组件：

const { facilities } = this.props.facility;
        return(
            <Container>

                <Form onSubmit={this.onSubmit}>
                    <FormGroup>
                        <Input
                        type="text"
                        name="facilityState"
                        id="facilityState"
                        placeholder="Search State"
                        value={query}
                        onChange={this.onChange}
                        />
                    </FormGroup>
                    <Button
                        color="dark"
                        style={{marginTop: '2rem'}}
                        block                    
                    > Search </Button>
                </Form>

                <Button onClick={this.checkReduxState}> Check Redux State </Button>

                { this.props.isAuthenticated ? 

                <ListGroup>
                    <TransitionGroup className="facilities-list">
                        {facilities.map(({_id, name, address, city, state, zip, phone, email}) => (
                            <CSSTransition key={_id} timeout={500} classNames="fade">
                                <ListGroupItem> 
                                { this.props.isAuthenticated ? 
                                <Button
                                className="remove-btn"
                                color="danger"
                                size="sm"
                                onClick={this.onDeleteClick.bind(this, _id)}
                                > &times;</Button> : null }


                                   <p> {name} </p> 
                                   <p> {address} </p>
                                   <p> {city} </p>
                                   <p> {state} </p>
                                   <p> {zip} </p>
                                   <p> {phone} </p>
                                   <p> {email} </p>

                                </ListGroupItem>
                            </CSSTransition>
                        ))}
                    </TransitionGroup>
                </ListGroup> : null

                }

            </Container>

特快路线：

router.get('/query', (req, res) => {
    Facility.find({
        state: req.body.facilityState
        // state: req.query.facilityState 
    })
        .then(facilities => res.json(facilities));
});

猫鼬模式：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// mongoose.set('useCreateIndex', true);

const FacilitySchema = new Schema({
    name: {
        type: String,
        required: true
    },
    address: {
        type: String,
        // text: true,
        required: true
    },
    city: {
        type: String,
        required: true
    },
    state: {
        type: String,
        text: true,
        index: true,
        required: true
    },
    zip: {
        type: Number,
        required: true
    },
    phone: {
        type: Number,
        required: true
    },
    email: {
        type: String,
        required: true
    },
});

// FacilitySchema.index({state: 'text'});


module.exports = Facility = mongoose.model('facility', FacilitySchema);

当我在 req.body.facilityState 中硬编码所需的字符串值时，按下用户界面上的提交按钮即可。此外，当使用 Postman 时，这条路线有效。但由于某种原因，express req.body（或 req.query）和组件并没有像他们应该的那样相互通信。有人能帮忙吗？

编辑 这里是 onChange 函数：

onChange = (e) => {
        this.setState({ [e.target.name] : e.target.value })
    }

编辑 2

这是 redux 操作文件查询：

export const queryFacilities = () => dispatch => {
    dispatch(setFacilitiesLoading());
    axios
        .get('/api/facilities/query')
        .then(res => 
            dispatch({
                type: QUERY_FACILITIES,
                payload: res.data
            }))
        .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}

标签： node.jsreactjsmongodbexpressmongoose

解决方案

我通过更改我的 API 调用解决了这个问题

router.get('/query', (req, res) => {
    Facility.find({
        state: req.body.facilityState
        // state: req.query.facilityState 
    })
        .then(facilities => res.json(facilities));
});

至

router.get('/query/:state', (req, res) => {
    Facility.find({
        state: req.params.state
    })
        .then(facilities => res.json(facilities));
});

并更改我的 Redux 操作

export const queryFacilities = () => dispatch => {
    dispatch(setFacilitiesLoading());
    axios
        .get('/api/facilities/query')
        .then(res => 
            dispatch({
                type: QUERY_FACILITIES,
                payload: res.data
            }))
        .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}

至

export const queryFacilities = (state) => (dispatch, getState) => {
    dispatch(setFacilitiesLoading());
    axios
        .get(`/api/facilities/query/${state}`)
        .then(res => 
            dispatch({
                type: QUERY_FACILITIES,
                payload: res.data
            }))
        .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}

所以基本上我能够通过使用 req.params 将我的输入传递给 API，而不是使用 req.body。

推荐阅读