我正在尝试了解 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记录未定义?
有人可以帮我吗?
最佳答案
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
中的异步调用来填充此状态() 得到它未定义。
关于javascript - 来自 axios 的 React 和 Redux 数据在 props 中不可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54883899/