saya baru mengenal React dan Redux. Mencoba memahami dasar-dasarnya dan melakukan beberapa contoh sederhana, tetapi saya terjebak dalam masalah ini selama lebih dari satu hari dan saya tidak dapat menemukan solusinya. Saya membayangkan bahwa kesalahan saya adalah kesalahan bodoh.
Masalahnya adalah saya tidak dapat mencetak berbagai pengguna. Saat melakukan debug, variabel pengguna dimuat dengan semua id dan pengguna yang diperbaiki, namun setelah menjalankan <li key={id}>{name}</li> sebanyak tiga kali, variabel tersebut kembali ke forEach dan memberi saya pengecualian ini: TypeError Tidak Tertangkap: Tidak dapat membaca properti 'forEach' yang tidak ditentukan, dengan pengguna tidak ditentukan. Dan saya juga mendapatkan kesalahan terkait dengan PropTypes: Pengguna prop tidak valid dari tipe array yang disediakan ke HomePage, objek yang diharapkan
Ini kodenya:
toko/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;
pengurang/index.js
import { combineReducers } from 'redux';
import userReducer from './userReducer';
//import groupReducer from './groupReducer';
export default combineReducers({
user: userReducer
});
pengurang/penggunaReducer.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;
}
}
aksi/penggunaAction.js
import { GET_USERS, ADD_USER, DELETE_USER } from './types';
export const getUsers = () => {
return {
type: GET_USERS
};
};
komponen/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);
