无法从服务器获取对象数组

Question

I am writing a simple website which display a list of object from server

server: index.js

var db = [{ username: 'admin', password: '1234', email: 'admin@gmail.com'}];
app.get('/getListAccount', (req, res)=>{
  res.send(db);
})

display: list.js

import React from 'react';
import {connect} from 'react-redux';
import axios from 'axios';

class Transaction extends React.Component{

  render(){
    var {listUser} = this.props;
    var xhtml = listUser != null ? <p>{listUser.map((e, i)=><p key={i}>{e.username}</p>)}</p>: <p>No user</p>;
    return (
      <div>
        <h1>Transaction</h1>
        {xhtml}
      </div>
    );
  }

  componentDidMount()
  {
    var {dispatch} = this.props;
    axios.get('/getListAccount')
    .then( ({data}) => {
      dispatch({
       type: 'INIT_LIST',
       mang: data
      });
    })
    .catch(err => console.log(err));
  }
}

module.exports = connect(function(state){
  return {listUser: state.listUser}
})(Transaction);

Here is reducer for listUser state: app.js

var listUser = (state = [{username: null, password: null, email: null}], 
action) => {
  switch(action.type){
    case 'INIT_LIST':
    {
      return {...action.mang};
    }
    default:
      return state;
  }
}

But when I run it always throw this error listUser.map is not a function . Why and how can I fix it? Thank you in advance!

Answer 1

In your reducer, try doing

case 'INIT_LIST':
    {
      return action.mang;
    }

The problem here is that you're putting an array in state (default state as well) and you're converting it back to the object.