时间戳

首页 > 解决方案 > 来自 axios 的 react 和 redux 数据在 props 中不可用

javascript - 来自 axios 的 react 和 redux 数据在 props 中不可用

问题描述

我正在尝试了解 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
      })
    );
};

这是我的减速机，

    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函数中我需要使用state.project.project，而返回的都是JSON对象，2）为什么在我的渲染方法中console.log日志未定义？

任何人都可以帮助我吗？

标签： javascriptreactjsreduxreact-redux

解决方案

1.我无法工作，为什么在我的 mapStateToProps 函数中我需要使用 state.project.project 当所有返回的都是 JSON 对象

您总是需要访问它，state.project.project因为state是由注入的东西，connect并且project是存储中的数据切片名称，因此您需要指定要从中获取数据的数据切片，因为您在中使用了combineReducers店铺。

2.为什么在我的渲染方法中 console.log 记录undefined。

这是因为你initialState在你的 reducer 中是 { } 并且你正在使用异步调用来填充它componentDidMount，当 render() 得到它时它是undefined。

推荐阅读