我正在编写一个简单的网站,显示来自服务器的对象列表
服务器:index.js
offset
display:list.js
var db = [{ username: 'admin', password: '1234', email: 'admin@gmail.com'}];
app.get('/getListAccount', (req, res)=>{
res.send(db);
})
这是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);
州的缩减器:
的 app.js
listUser
但是当我运行它时总是抛出这个错误
var listUser = (state = [{username: null, password: null, email: null}],
action) => {
switch(action.type){
case 'INIT_LIST':
{
return {...action.mang};
}
default:
return state;
}
}
。为什么以及如何解决它?先感谢您!
答案 0 :(得分:2)
在您的减速机中,尝试
case 'INIT_LIST':
{
return action.mang;
}
这里的问题是你将数组置于状态(默认状态)并且你将它转换回对象。