reactjs - 将数据从 MongoDB 加载到 React 状态

问题描述

我有一个问题，我可以从我的节点服务器加载用户数据，但是当我尝试将数据放入 React 前端的状态时，我在调用数据时得到 404。

错误：http://localhost:3000/users 404（未找到）

我尝试了几种方法，但似乎我的问题在于无法将数据库中的数据预加载到状态中......谁能告诉我我错过了什么？

路线/API

// @route   GET api/users
// @desc    Get Users
// @access  Public
router.get('/', async (req, res) => {
  try {
    const users = await User.find();
    res.json(users);
  } catch (error) {
    console.error(error.message);
    res.status(500).send('Server Error');
  }
});

module.exports = router;

然后在前端，我有一个动作

import axios from 'axios';
import {
  GET_USERS,
  GET_USERS_ERROR
} from './types';

// Get users
export const getUsers = () => async (dispatch) => {
  try {
    const res = await axios.get('/users');

    dispatch({
      type: GET_USERS,
      payload: res.data,
    });
  } catch (error) {
    dispatch({
      type: GET_USERS_ERROR,
      payload: {
        msg: error.response.status.statusText,
        status: error.response.status,
      },
    });
  }
};

我的减速器文件：

import {
  GET_USERS,
  GET_USERS_ERROR
} from '../actions/types';

const initialState = {
  user: null,
  users: [],
  error: {},
};

export default function(state = initialState, action) {
  const {
    type,
    payload
  } = action;

  switch (type) {
    case GET_USERS:
      return {
        ...state,
        users: payload,
      };
    case GET_USERS_ERROR:
      return {
        ...state,
        error: payload,
      };
    default:
      return state;
  }
}

最后，我试图获取数据的地方

import React, {
  useState,
  useEffect
} from 'react';
import {
  connect
} from 'react-redux';
import {
  getUsers
} from '../../actions/users';
import PropTypes from 'prop-types';

//Bootstrap Table
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import * as ReactBootStrap from 'react-bootstrap';

const UserTable = ({
  getUsers,
  users
}) => {
  useEffect(() => {
    getUsers();
    // eslint-disable-next-line
  }, []);

  const [loading, setLoading] = useState(false);

  const columns = [{
      dataField: '_id',
      text: 'ID'
    },
    {
      dataField: 'user_id',
      text: "User's ID"
    },
    {
      dataField: 'firstname',
      text: 'Title of Todo'
    },
    {
      dataField: 'lastname',
      text: 'Is this done?'
    },
  ];

  return ( <
    div > Hello < /div>
    // <BootstrapTable
    //   keyField='id'
    //   data={users}
    //   columns={columns}
    //   pagination={paginationFactory()}
    // />
  );
};

const mapStateToProps = (state) => ({
  users: state.users,
});

export default connect(mapStateToProps, {
  getUsers
})(UserTable);

标签： reactjsmongodbredux

reactjs - 将数据从 MongoDB 加载到 React 状态

问题描述

解决方案

推荐阅读