reactjs - AXIOS-通过快递发送对象

Question

//reducer.js
const initialState = {
    students:[]
}
const reducer = (state = initialState, action) =>{
    
    //load... data
    const allStudents = [...state.students];
   
    //check... case
    switch (action.type) {
       case 'GET_STUDENT_LISTS':
            const loadStudent = {
                ...state,
                students: action.payload
            }
            return loadStudent
       default:
            break;
    }
    //end switch case
    return state;
}
export default reducer;

我的项目有一些问题。我想将 app.js 中的 student[] 发送到 reducer.js 中的 student[]。我通过 node app.js 和 localhost:3000/api/students 测试。它可以显示数组。但是 reducer.js 中的 student[] 没有得到它。我怎么能得到它。请帮我。

标签： reactjsexpressaxios

Answer 1

import React, { Component } from 'react';
import Student from './Student';
import {connect} from 'react-redux';
import * as action from '../Action/action';

class StudentList extends Component{
    componentDidMount (){
        this.props.getAllStudents();
    }
   
    render(){
        const AllStudents = this.props.studentsFromStore;
        console.log(AllStudents);
        let list = (
            <div className="col-12 mx-auto">
                <div className="alert-info text-center pt-5 pb-5">not found</div>
            </div>
        );
       
        if(AllStudents.length !== 0){
            list = AllStudents.map(items => (
                <div className="col-12 col-sm-6 col-lg-4 mt-3" key={items.id}>
                    <Student data={items}/>
                </div>
            ));
        }
        return(
            <div className="row">
               {list}
            </div>
        )
    }
}
const mapStateToProps = state => {
    return{
        studentsFromStore : state.students
    }
}
const mapDispatchToProps = dispatch => {
    return {
        getAllStudents : ()=>{
            return dispatch(action.getStudentLists());
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(StudentList);