私はAPIを呼び出して返されたUserオブジェクトの配列をstate.admin.users
に渡すことを控えています。Redux:APIを呼び出した後に状態を更新することができません
マイコード: //コンポーネント
class MyComponent extends Component {
componentWillMount() {
console.log('componentWillMount()');
this.props.fetchAllUsers();
}
render() {
return (
<div>
<ul>
{
this.props.users.map(function(user) {
return <div>user.email</div> })
}
</ul>
</div>
);
}
}
function mapStateToProps(state) {
console.log('state:' + JSON.stringify(state));
return {
users: state.admin.users
}
}
export default connect(mapStateToProps, {fetchAllUsers})(myComponent);
//減速
const INITIAL_STATE = { users:[] };
export default function (state = INITIAL_STATE, action) {
return { ...state, users:action.payload }; // Any problem here?
}
//アクション
export function fetchAllUsers() {
return function(dispatch) {
axios.get(`${API_URL}/users`)
.then(response => {
console.log('response.data:' +JSON.stringify(response.data));
dispatch({
type: FETCH_ALL_USERS,
payload: response.data // Any problems here?
});
})
.catch(response => dispatch(errorHandler(response.data.error)))
}
}
コンソール出力
状態:{ "管理者" は:{}} bundle.js:2570:1
componentWillMountを()bundle.js:295:8
OPTIONS XHR http://myip:3001/api/users [HTTP/1.1 200 OK 2ミリ秒]
OK Fを見response.dataGETのXHR http://myip:3001/api/users [HTTP/1.1 304 4MSを変更していない]除去
response.data:[{data} {データが削除} {データが削除}]
それともわたし。上記のコードに問題はありますか?なぜstate.adminは空ですか?なぜcomponentWillMount()
はmapStateToProps
の後に呼び出されますか?
コメントは歓迎します。おかげ
ディスパッチ({ タイプ:FETCH_ALL_USERS、 ペイロード:レスポンスデータ });は失敗したようです。 – BAE
エラーケースを 'catch'ではなく' then'の第2引数として書き直してみてください。 https://github.com/facebook/react/issues/7617#issuecomment-247710003 –