Как запросить базу данных MongoDB, используя MongoDB, Express, React и Node?

Question

Я не могу на всю жизнь понять, как использовать 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>

Express Маршрут:

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

Пн goose Схема:

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, нажатие кнопки «Отправить» в пользовательском интерфейсе работает. Также при использовании Почтальона этот маршрут работает. Но по какой-то причине express req.body (или req.query) и компонент не взаимодействуют друг с другом так, как должны. Кто-нибудь может помочь с этим?

РЕДАКТИРОВАТЬ Вот функция onChange:

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

РЕДАКТИРОВАТЬ 2

Вот редукция запрос файла действий:

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)));
}

Answer 1

Я исправил проблему, изменив мой вызов 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)));
}

Таким образом, по сути, я смог передать свой вход через API с помощью req.params, а не с помощью req.body.