组件没有预期的 props，而 React 和 Redux Dev Tools 具有预期的状态和 Props

Question

我正在学习react-redux，所以我决定实现我一直在学习的东西。但是我有一个错误挑战。所以我从mapStateToProps函数中控制台登录this.props.users。

我相信有些事情我没有做对，我不明白。请在其他方面解释以继续。非常感谢您的帮助。

这是我的代码。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUsers } from '../actions/userAction';
import UserList from '../components/UserList';
class UserPage extends Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    this.props.fetchUsers();
  }
  componentDidMount() {
    console.log(this.props.users);
  }
  render() {
    return (
      <div>
        <h2>Users Page</h2>
        <UserList users={this.props.users} />
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    users: state.userReducer.users
  };
};
const mapDispatchToProps = dispatch => {
  return {
    fetchUsers: () => dispatch(fetchUsers())
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(UserPage);

所以这就是我从 chrome 控制台得到的 - 空数组。显示空数组的道具

但是当我检查 React DevTool 和 Redux DevTool 时，它们分别显示了预期的 Props 和状态。以下是开发工具的快照

React devtool 显示正确的道具

Redux 开发工具显示正确的状态和操作

用户操作.js

import axios from 'axios';
import * as types from './actionTypes';
export let fetchingUser = () => {
  return {
    type: types.FETCHING_USERS
  };
};
export let fetchedUser = payload => {
  return {
    type: types.FETCHED_USER,
    payload
  };
};
export let fetchUser_error = () => {
  return {
    type: types.FETCH_USER_ERROR
  };
};
export let fetchUsers = () => {
  let url = 'https://eventcity.herokuapp.com/api/v1/users';
  return dispatch => {
    dispatch(fetchingUser());
    return axios
      .get(url)
      .then(response => {
        const users = response.data.data;
        dispatch(fetchedUser(users));
      })
      .catch(err => {
        dispatch(fetchUser_error());
      });
  };
};

用户减速器.js

import * as types from '../actions/actionTypes';
import initialState from './initialState';
const userReducer = (state = initialState, action = {}) => {
  switch (action.type) {
    case types.FETCHING_USERS:
      return { ...state, users: [], error: null, loading: true };
    case types.FETCHED_USER:
      return { ...state, users: action.payload, error: null, loading: false };
    case types.FETCH_USER_ERROR:
      return {
        ...state,
        users: [],
        error: { message: 'Error loading data from the API' },
        loading: false
      };
    default:
      return state;
  }
};
export default userReducer;

配置存储.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from '../reducer/rootReducer';
const configureStore = () => {
  return createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
};
export default configureStore;

根减速器.js

import { combineReducers } from 'redux';
import userReducer from './userReducer';
const rootReducer = combineReducers({
  userReducer
});
export default rootReducer;

Answer 1

我想你可能想检查一下https://github.com/reactjs/react-redux/issues/129。您的问题是使用 componentDidMount 和 componentWillMount，而没有更好地了解它们的用途。

Answer 2

问题不在于 redux，您只需要了解您的 fetchUsers 请求async并且componentDidMount函数仅在组件渲染后执行一次，并且可能会发生在执行函数时数据不存在componentDidMount因此您的console.log(this.props.users);返回空数组， 将其记录在渲染方法中，您将看到正确的数据

class UserPage extends Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    this.props.fetchUsers();
  }
  render() {
    console.log(this.props.users);
    return (
      <div>
        <h2>Users Page</h2>
        <UserList users={this.props.users} />
      </div>
    );
  }
}