Question

最近几天，我一直在进行Redux api调用。我实际上在将数据返回到视图组件时遇到问题。目前，我能够在动作生成器中查看数据，因此至少知道我能够获得它。但是，视图中没有任何显示。我想它可能与加载时有关。这就是为什么我尝试在渲染组件时加载它的原因。 https://djangoandreact.herokuapp.com/user/1无法加载。

codesandbox：https://codesandbox.io/s/zlor60q3jm?from-embed 应该可以像转到/ 1一样最终转到/ user / 1并显示一篇文章（《希望》）

此处包含视图组件：

import React from "react";
import { connect } from "react-redux";
import { fetchUser } from "../store/actions/userActions";

class UserDetailView extends React.Component {
  componentDidMount() {
    const userID = this.props.match.params.userID;
    fetchUser(userID); //fixed
  }
  render() {
    const { user } = this.props.user;
    console.log(user);

    return (
      <div>
        <h3>{user.username}</h3>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  user: state.user
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  fetchUser: dispatch(fetchUser(ownProps.match.params.userID))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserDetailView);

动作生成器

import axios from "axios";
import { thunk } from "react-redux";

export function fetchUser(userID) {
  console.log(userID);
  return dispatch => {
    return axios.get(`/api/user/${userID}`).then(res => {
      dispatch(fetchUserSuccess(res.data));
      console.log(res.data); // loads data
    });
  };
}

// Handle HTTP errors since fetch won't.
function handleErrors(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

export const FETCH_USER_BEGIN = "FETCH_USER_BEGIN";
export const FETCH_USER_SUCCESS = "FETCH_USER_SUCCESS";
export const FETCH_USER_FAILURE = "FETCH_USER_FAILURE";

export const fetchUserBegin = () => ({
  type: FETCH_USER_BEGIN
});

export const fetchUserSuccess = user => ({
  type: FETCH_USER_SUCCESS,
  payload: { user }
});

export const fetchUserFailure = error => ({
  type: FETCH_USER_FAILURE,
  payload: { error }
});

减速器（可能还不错）

import {
  FETCH_USER_BEGIN,
  FETCH_USER_SUCCESS,
  FETCH_USER_FAILURE
} from "../actions/actionTypes";

const initialState = {
  user: {},
  loading: false,
  error: null
};

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_USER_BEGIN:
      return {
        ...state,
        loading: true,
        error: null
      };

    case FETCH_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        user: action.payload.user
      };

    case FETCH_USER_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload.error,
        user: {}
      };

    default:
      return state;
  }
}

Answer 1

人。我找到了。

   case FETCH_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        user: action.payload.user
      };

用户应该是user:action.payload

同样，用户操作应该是

export const fetchUserSuccess = user => ({

    type: FETCH_USER_SUCCESS,
    payload:  user 
  })

哇。但是，老实说，在过去的两个不眠之夜，我对Redux的了解很多，值得付出痛苦。真的是。现在，我知道动作生成器是什么，而不是复制面食，以及reducer（obvi）

反应Redux API调用，数据无法返回到组件

1 个答案: