无法使用react和redux在组件中显示数据 [英] Unable to display data in component with react and redux
问题描述
我正在尝试在我的组件上显示一些虚拟数据,但我没有看到任何出现在它上面的内容。当我 console.log
我得到的预期结果 [object Object]
。
I'm trying to display some dummy data on my component, but I'm not seeing anything appearing on it. When I console.log
the expected result I get [object Object]
.
我想我错过了我的行动
, actionCreators
和减速器
。任何帮助将不胜感激。
I think I'm missing something with my actions
,actionCreators
and reducers
. Any help will be greatly appreciated.
谢谢。
#actions/types.js
export const FETCH_USERS = 'fetch_users';
#actions/index.js
import {
FETCH_USERS
} from './types';
const user = [
{ name: 'D/S' },
{ name: 'Bob' },
{ name: 'Juan' }
]
export function fetchUsers() {
return { type: FETCH_USERS, payload: user }
}
#reducers/users_reducer.js
import {
FETCH_USERS
} from '../actions/types';
export default function (state = [], action) {
switch(action.type) {
case FETCH_USERS:
return [ ...state, ...action.payload ];
}
return state;
}
#reducers/index.js
import { combineReducers } from 'redux';
import UsersReducer from './users_reducer';
const rootReducer = combineReducers({
users: UsersReducer
});
export default rootReducer;
# components/UserList.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import styles from './App.css';
import * as actions from '../actions';
class UserList extends Component {
componentWillMount() {
const fetchedUsers = this.props.fetchUsers() ? this.props.fetchUsers() : 'No users at this time';
console.log(`This is the list of users: ${fetchedUsers}`); // <= here I just get [object Object]
}
renderUser(user) {
<div className={ styles.card }>
<h4>{ user.name }</h4>
<p>Lego Inc</p>
<a>Email</a>
</div>
}
render() {
const userList = this.props.users.map(this.renderUser);
console.log(`${userList}`);
return (
<div>
{ userList }
</div>
)
}
}
function mapStateToProps(state) {
return { users: state.users }
}
export default connect(mapStateToProps, actions)(UserList);
# components/App.js
import React from 'react';
import styles from './App.css';
import UserList from './UserList';
const App = () => (
<div className={''}>
<h2>React Redux middleware</h2>
<div>
<UserList />
</div>
</div>
);
export default App;
推荐答案
您没有返回 JSX
地图函数
内的内容。
You are not returning the JSX
content inside your map function
.
renderUser(user) {
return ( // Added a return statement here
<div className={ styles.card }>
<h4>{ user.name }</h4>
<p>Lego Inc</p>
<a>Email</a>
</div>
)
}
此外,您还需要使用console.log( $ {userList}
), console.log(userList)
会工作,但与问题无关。只想添加答案
Also you need to use console.log(${userList}
) is not required, console.log(userList)
will work, however that not relevant to the problem. Just wanted to add to the answer
这篇关于无法使用react和redux在组件中显示数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!