ฉันยังใหม่กับ React และ Redux พยายามที่จะเข้าใจพื้นฐานและทำตัวอย่างง่ายๆ แต่ฉันติดอยู่ในปัญหานี้มากกว่าหนึ่งวัน ฉันไม่พบวิธีแก้ไข ฉันคิดว่าความผิดพลาดของฉันเป็นความผิดพลาดที่โง่เขลา
ปัญหาคือฉันไม่สามารถพิมพ์อาร์เรย์ของผู้ใช้ได้ เมื่อทำการดีบัก ตัวแปร ผู้ใช้ กำลังโหลดด้วยรหัสและผู้ใช้ที่ถูกต้องทั้งหมด แต่หลังจากดำเนินการ <li key={id}>{name}</li> สามครั้ง ตัวแปรจะกลับมาที่ forEach และให้ข้อยกเว้นนี้แก่ฉัน: TypeError ที่ไม่ถูกตรวจจับ: ไม่สามารถอ่านคุณสมบัติ 'forEach' ของไม่ได้กำหนด โดยที่ ผู้ใช้ ไม่ได้กำหนดไว้ และฉันยังได้รับข้อผิดพลาดที่สอดคล้องกับ PropTypes: ผู้ใช้ prop ไม่ถูกต้องของอาร์เรย์ประเภทที่ส่งไปยังโฮมเพจ วัตถุที่คาดหวัง
นี่คือรหัส:
ร้านค้า/configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/index';
const initialState = {};
const middleware = [thunk];
const store = createStore(rootReducer, initialState, compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
export default store;
ตัวลด/index.js
import { combineReducers } from 'redux';
import userReducer from './userReducer';
//import groupReducer from './groupReducer';
export default combineReducers({
user: userReducer
});
ตัวลด/userReducer.js
import { GET_USERS, ADD_USER, DELETE_USER } from '../actions/types';
const initialState = {
users: [
{ id: 1, name: 'brunao'},
{ id: 2, name: 'flavio'},
{ id: 3, name: 'dudu'}
]
};
export default function(state = initialState, action) {
switch (action.type) {
case GET_USERS:
return [
...state
];
default:
return state;
}
}
การกระทำ/usersAction.js
import { GET_USERS, ADD_USER, DELETE_USER } from './types';
export const getUsers = () => {
return {
type: GET_USERS
};
};
ส่วนประกอบ/HomePage.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getUsers } from '../actions/usersActions';
import PropTypes from 'prop-types';
class HomePage extends Component {
componentDidMount() {
this.props.getUsers();
}
render() {
const { users } = this.props.user;
return(
<div>
<h3>Users</h3>
<ul>
{users.forEach(({id, name}) => (
<li key={id}>{name}</li>
))}
</ul>
</div>
);
}
}
HomePage.propTypes = {
getUsers: PropTypes.func.isRequired,
user: PropTypes.object.isRequired
}
const mapStateToProps = (state) => ({
user: state.user
});
export default connect(mapStateToProps, { getUsers })(HomePage);
