React / Redux - 无法读取未定义的属性“XXX”

Question

这是我已经坚持了两个多星期的事情，所以这个问题是我解决这个问题的最后机会。我希望任何人都可以帮助我（因为问题很可能是一些小问题/我错过了）

---

使用 Node、Redux 和 React，我从我的 Mongo 数据库返回一个集合。 我正在使用 react-redux "connect" 从我的商店中检索我的数据如下面的 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);
        });

});

我的 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"
}

---

感谢您对此问题的任何帮助或建议 - 在此先感谢您。

Answer 1

React 将在其 props（通过 Redux connect 提供）更改时重新呈现页面。由于您只是触发获取componentWillMount 中数据的请求，因此根据定义，这不会在第一次渲染时完成。但是，在第一种情况下这没有问题，因为this.props.article 保证是一个对象[]，所以this.props.article.title 将只是undefined。一旦对 API 的请求返回，article 就会在商店中更新，并且页面会以预期的内容呈现。

但是，由于this.props.article 最初是[]，如果您尝试渲染this.props.article.body.section1.text，您的代码将抛出异常，因为article 是一个对象，article.body 是undefined。已经抛出错误，当文章在商店中实际更新时，组件将无法重新呈现。

在尝试呈现子键之前，您需要添加一个保护来检查this.props.article 的形状，或者在请求与实际文章一起返回之前，为存储添加一个更完整的默认值。

Answer 2

试试这样的。可能是在第一个渲染周期中它还没有出现。

checkRender(){
      typeof this.props.article.body === 'undefined' 
      ? return null 
      : return this.props.article.body.section1.text
    }

然后使用它::>

<h3>{checkRender}</h3>

Answer 3

我绝对可以推荐将流类型检查添加到您的代码库 (http://flow.org)。它可以逐个文件添加，但对调试这类问题有很大帮助。