React / Redux – 无法读取未定义的属性“XXX”
这是我一直坚持了两个多星期的事情，所以这个问题是我最后的机会。 我希望任何人都可以帮助我（因为问题很可能是小事/我错过了）
使用Node，Redux和React，我从Mongo数据库返回一个集合。 我正在使用react-redux“连接”从我的商店检索我的数据如在我的JSX下面看到的。
JSX：
import React from "react"; import {connect} from "react-redux" import {fetchArticle} from "../../actions/articleActions" var classNames = require('classnames'); import GlobalHero from '../modules/GlobalHero.jsx'; @connect((store) => { return {article: store.article.article, fetching: store.article.fetching}; }) export default class Article extends React.Component { // BEFORE COMPONENT RENDER (For Everyhing else) constructor() { super(); //sets initial state this.state = { page: "Article" }; } // BEFORE COMPONENT RENDER (For Ajax / Dispatcher Events): get article Title / Thumbnail rows based on this.props.indexLimit componentWillMount = () => { console.log(this.props) this.props.dispatch(fetchArticle(this.props.params.id)) } // ON COMPONENT RENDER componentDidMount = () => {} render() { if (this.props.fetching) { return ( <p>Loading...</p> ); } else { return ( <div> <h1>{this.props.article.title}</h1> <h2>{this.props.article.subTitle}</h2> </div> ); } } } 我的问题：
所以当我在我的JSX中返回“title”和“subTitle”时，它将所有的东西都完美地取出来（见下面）：
<h1>{this.props.article.title}</h1> <h2>{this.props.article.subTitle}</h2>
数据也可以在我的屏幕上看到（见下文）：
但是，只要我补充说：
<h3>{this.props.article.body.section1.text}</h3>
我的页面不会加载，我的控制台返回：
无法读取未定义的属性'section1'
当我在控制台中查看返回的数据的状态时：
正如你所看到的，它在控制台中返回'section1'，所以我必须在我的JSX中调用我的'section1'错误？
我在想，这个问题可能是因为'section1'嵌套在我的mongo db集合中，而不是'title'或'subTitle'。
下面我会告诉你我的这个网页的其余路线 – 我已经看了无尽的在线，不能指出我的问题。
行动：
import axios from "axios"; //var resourceUrl = "http://localhost:7777/api/schools"; export function fetchArticle(id) { return function(dispatch) { dispatch({ type: "FETCH_ARTICLE" }) axios.get('/api/article', { params: { id: id } }) .then((response) => { dispatch({ type: "FETCH_ARTICLE_FULFILLED", payload: response.data }) }) .catch((err) => { dispatch({ type: "FETCH_ARTICLE_REJECTED", payload: err }) }) } }
减速器：
export default function reducer(state = { article: [], fetching: false, fetched: false, error: null, }, action) { switch (action.type) { case "FETCH_ARTICLE": { return { ...state, fetching: true } } case "FETCH_ARTICLE_REJECTED": { return { ...state, fetching: false, error: action.payload } } case "FETCH_ARTICLE_FULFILLED": { return { ...state, fetching: false, fetched: true, article: action.payload, } } } return state }
商店：
import { applyMiddleware, createStore } from "redux" import logger from "redux-logger" import thunk from "redux-thunk" import promise from "redux-promise-middleware" import reducer from "./reducers" const middleware = applyMiddleware(promise(), thunk, logger()) export default createStore(reducer, middleware)
节点/快速呼叫：
app.get('/api/article', (req, res) => { var ObjectId = require('mongodb').ObjectID; var articles; db.collection('articles') .findOne({ "_id": ObjectId("58c2a5bdf36d281631b3714a") }) .then(result => { articles = result; }).then(() => { res.send(articles); }).catch(e => { console.error(e); }); });
logging在我的mongo DB集合中：
{ "_id": { "$oid": "58c2a5bdf36d281631b3714a" }, "title": "EntertheBadJah", "subTitle": "Lorem ipsum dolor", "thmbNailImg": "", "headerImg": "", "body": { "section1": { "include": true, "text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo." }, "section2": { "include": true, "text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo." }, "bodyImg": { "include": true, "img": "" }, "section3": { "include": true, "text": "Lorem ipsum dolor sit amet, dico posse integre cum ut, praesent iudicabit tincidunt te sea, ea populo semper laoreet duo." } }, "links": { "recourse": { "include": false, "text": "Go watch their interview", "link": "" }, "soundcloud": { "include": true, "link": "www.soundcloud.com/BadJah" }, "spotify": { "include": false, "link": "" }, "youtube": { "include": false, "link": "" }, "twitter": { "include": false, "link": "" }, "facebook": { "include": false, "link": "" }, "instagram": { "include": false, "link": "" } }, "keywords": "Badjah", "date": "", "author": "Aagentah", "dateAdded": "2017-06-01T00:00:00.000Z" }
任何关于这个问题的帮助或build议表示赞赏 – 预先感谢您。
当它的道具（通过Redux连接提供）改变时，React将重新渲染页面。 由于您只是触发请求来获取componentWillMount的数据，根据定义，这将不会在第一个渲染完成。 然而，这在第一种情况下没有问题，因为this.props.article保证是一个对象，所以this.props.article.title只是undefined 。 一旦对API的请求返回， article就会在商店中更新，并且页面呈现预期的内容。
但是，因为this.props.article最初是[] ，所以如果您尝试渲染this.props.article.body.section1.text ，那么您的代码将会抛出一个exception，因为虽然article是一个对象，但article.body是undefined 。 在已经引发错误的情况下，组件将在商店中实际更新的商品时失败。
在尝试呈现子this.props.article之前，您需要添加一个警卫来检查this.props.article的形状，或者在请求返回实际文章之前，为商店添加更完整的默认值。
尝试这样的事情。 可能是在第一个渲染循环中它还没有出现。
checkRender(){ typeof this.props.article.body === 'undefined' ? return null : return this.props.article.body.section1.text }
然后使用它::>
<h3>{checkRender}</h3>
我可以肯定的build议添加streamtypes检查到您的代码库（ http://flow.org ）。 它可以添加在每个文件的基础上，但可以显着帮助debugging这些types的问题。