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

这是我的减速器，

    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。。我无法工作，为什么在mapStateToProps函数中，当所有返回的都是JSON对象时，我需要使用state.project.project。

您始终需要使用$description = $request->get('description'); if (!empty($description)){ $description_query = Transcationhistorique::where([ ['sender_id', '=', $user_id], ['description', 'LIKE', "%{$description}%"] ]) ->orWhere('receiver_id', $user_id)->get(); }else{ $description_query = "" ; }访问它，因为 state 是由%let oldValue = %sysfunc(getoption(linesize));注入的，而state.project.project是您的数据切片名称< / strong>，因此您需要指定要从中获取数据的数据切片，因为您在商店中使用过 combineReducers 。

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

这是因为您在化简版中的connect是{}，并且您正在project中使用 async 调用来填充它，当render（）得到它是< strong>未定义。

Answer 2

假设res.data包含您在问题中指定的json对象，并将reducer属性命名为project，则它应包含project属性，即代码应该工作正常。您可以尝试在化简器/操作中记录有效负载，以检查api是否正确发送了数据。您还可以将项目的初始值设置为{}（空对象），以免在初始渲染时将state.project.project设置为undefined。请检查其是否正确设置。

您还可以检查控制台中是否有任何错误，还可以使用redux-logger中间件记录所有调度的操作-这将使您了解redux内部正在发生的事情。

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

2 个答案: