在react

时间:2018-07-07 18:26:34

标签: node.js mongodb reactjs redux mern

我有这段代码,用于提取存储在我的Mongo数据库中的数据。该API可以正常工作,但是当我在reactjs中使用GET_ITEMS获取数据时。没用数据不会追加到为存储api数据而创建的数组中。 注意-当我手动将数据加载到阵列中时,我的请求就可以正常工作“项目:[]”(来自第一个片段) 这是我的文件。

import { ADD_ITEM, DELETE_ITEM, GET_ITEMS, ITEMS_LOADING} from '../actions/types';

const initialState = {
    items: [],
    loading: false
};

export default function(state = initialState, action) {
  
    switch(action.type){
      case GET_ITEMS:  
        return {
          ...state,
          items: action.payload,
          loading: false
        };
        
      case DELETE_ITEM:
        return {
          ...state,
          items: state.items.filter(item => item.id!== action.payload)
        };
  
      case ADD_ITEM:
        return {
          ...state,
          items: [action.payload, ...state.items]
        };
        
      case ITEMS_LOADING:
        return {
          ...state,
          loading: true
        };
  
      default:
        return state;
  
  
      
    }
  
  
  }

const express = require('express');
const router = express.Router();


const Item = require('../../models/Item');

// @route GET api/items
// @desc GET All Items
// @access Public
router.get('/',(req,res)=>{
   Item.find()
     .then(items => res.json(items));

});

module.exports = router;

import React, { Component } from 'react';
import ButtonAppBar from '../appbar/appbar';
import FloatingActionButtons from '../fabButtons/fabButton';
import DashCard from '../dashCards/dashCards';
import Grid from '@material-ui/core/Grid';
import Order from '../order/order';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';
import Button from '@material-ui/core/Button';

import { connect } from 'react-redux';
import { getItems } from '../../actions/itemActions';
import PropTypes from 'prop-types';

class DashBoard extends Component{
  state = {
    quotes: []
  }
  componentDidMount() {
    
    this.props.getItems;
  }

 render() {
    const {items} = this.props.item;
    return (
      <div>
        <ButtonAppBar color="primary"/>
        <h1>Dashboard</h1>
        <FloatingActionButtons color="primary"/>
        <Grid container>
          {items.map((item) =>

            (<Grid item xs={6} sm={3} key={item.vehiclenumber}>
            <DashCard data={item}/>

          </Grid>)
            )}
        </Grid>

      </div>
    )}
  }

DashBoard.propTypes = {
  getItems: PropTypes.func.isRequired,
  item: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
  item: state.item
})

export default connect(mapStateToProps, {getItems})(DashBoard);

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


const ItemSchema = new Schema({

    vehiclenumber: {
        type: Number,
        required: true
    },
    drivername: { 
        type: String,
        required: true},
    driverphonenumber: { 
        type: Number,
        required: true},
    date: {
        type: Date,
        default: Date.now
    }
});

module.exports = Item = mongoose.model('item', ItemSchema);

0 个答案:

没有答案