javascript - 来自 axios 的 React 和 Redux 数据在 props 中不可用

Question

我正在尝试了解 React 和 Redux，

我正在从我编写的 api 中获取一些数据，并尝试将该数据呈现到我的一个组件中。返回的数据是一个简单的 JSON 对象，如下所示，

{
"brief": "No brief given",
"tasks": [
    {
        "_id": "5c74ffc257a059094cf8f3c2",
        "task": "XXX Task 7",
        "project": "5c7458abd2fa91567f4e4f03",
        "date_created": "2019-02-26T08:58:42.260Z",
        "__v": 0
    }
],
"_id": "5c7458abd2fa91567f4e4f03",
"owner": {
    "_id": "5c5af553eea087426cd5f9b9",
    "name": "Test test",
    "email": "test@test.com",
    "avatar": "placeholder.jpg",
    "password": "$2a$10$dsGdQZ4APnmAVjbII4vX4u7bCEm0vjxGtHAJ8LijrcBBNTHSn9d5i",
    "created_at": "2019-02-06T14:55:15.321Z",
    "__v": 0
},
"name": "XXX Project 1",
"status": "Pending",
"slug": "XXX-project-1",
"created_at": "2019-02-25T21:05:47.643Z",
"__v": 0

}

我通过组件中的 componentDidMount() 函数中的操作检索此数据，如下所示，

       import React, { Component } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { getProject } from "../../actions/projectActions";
import Dropdown from "react-dropdown";
import Avatar from "../profile/Avatar";
import ProjectPlaceholder from "../../img/new-project.svg";

import "react-dropdown/style.css";
import "../../css/project.scss";

class Project extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.dispatch(getProject(id));
  }

  render() {
    console.log(this.props.project.name)
  }

Project.propTypes = {};

const mapStateToProps = state => ({
  project: state.project.project,
  errors: state.errors
});

export default connect(mapStateToProps)(Project);

这是我的行动，

    import axios from "axios";

import { GET_PROJECT, GET_ERRORS } from "./types";

// Set logged in user
export const getProject = slug => dispatch => {
  axios
    .get(`/api/projects/${slug}`)
    .then(res => {
      console.log(res);
      dispatch({
        type: GET_PROJECT,
        payload: res.data
      });
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

这是我的 reducer ，

    import { GET_PROJECT } from "../actions/types";

const initialState = {};

export default function(state = initialState, action) {   
    switch (action.type) {
        case GET_PROJECT:
            return {
                ...state,
                project: action.payload
            };
        default:
            return state;   
    } 
}

所以1)我无法工作，为什么在我的mapToProps函数中，当返回的所有内容都是JSON对象时，我需要使用state.project.project，以及2)为什么在我的渲染方法中，console.log记录未定义？

有人可以帮我吗？

Answer 1

1. I cannot work why in my mapStateToProps function I need to using state.project.project when all that gets returned is JSON object

你总是需要访问它的state.project.project，因为state是由connect和project注入(inject)的东西 是您在商店中的数据切片名称，因此您需要指定要从中获取数据的数据切片，因为您已使用在商店中组合Reducers。

2. why in my render method the console.log logs undefined.

这是因为您的 reducer 中的 initialState 为 { }，并且您在渲染时使用 componentDidMount 中的异步调用来填充此状态() 得到它未定义。