Question

我正在学习react-redux，所以我决定实施我一直在学习的东西。但我有一个bug挑战。所以我在this.props.users函数中登录{。{1}}。

我相信我做得不对，我不明白。请继续解释。非常感谢你的帮助。

这是我的代码。

mapStateToProps

所以这就是我从chrome控制台获得的 - 空数组。 props showing empty arrays

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

React devtool shows the correct Props

Redux devtool show the correct States and Actions

userAction.js

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);

userReducer.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());
      });
  };
};

configureStore.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;

rootReducer.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;

Answer 1

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

Answer 2

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

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>
    );
  }
}

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

2 个答案: