这个reducer有什么问题，因为它无法识别我认为的json答案

【问题标题】：What's wrong with this reducer since it cant recognize a json I think这个reducer有什么问题，因为它无法识别我认为的json
【发布时间】：2020-08-29 21:56:35
【问题描述】：

我学习了 React Redux 并且可能在如何设置我的 reducer 上陷入困境，所以它知道这是我的 Redux-Saga 正在获取的 json 文件。我已经测试并且Saga正在获取json并且我的reducer保存它但是function Hero({ articles }) {....抱怨：

TypeError: 无法读取未定义的属性“标签”

label 在我的 json 中是一个点头！

function Hero({ articles }) {
    return (
        <section className="hero is-dark is-fullheight has-bg-image">
            <div className="hero-head">
                <NavBar />
            </div>
            <div className="hero-body">
                <div className="container">
                    <p className="subtitle is-5 has-text-weight-light">I'm a</p>
                    <h1 className="title">{articles.basics.label}</h1>
                    <h2 className="subtitle">
                        {articles.basics.location.region}, {articles.basics.location.country}
                    </h2>
                    <div>
                        <p className="subtitle is-5 has-text-weight-light">{articles.basics.description}</p>
                    </div>
                    <div className="navbar-item  is-6   is-unselectable">{articles.basics.fansite}</div>
                    <div className="navbar-item  is-6   is-unselectable">{articles.basics.fansiteDev}</div>
                </div>
            </div>

            <div className="hero-foot" style={{ paddingBottom: '20px' }}>
                <div className="columns is-mobile">
                    <div className="column" />
                    {articles.basics.profiles.map(value => {
                        const id = uniqueId();
                        return (
                            <div key={id} className="column has-text-centered">
                                <a href={value.url} target="blank" className="is-hovered" title={value.network}>
                                    <span className="icon is-medium is-">
                                        <i className={value.x_icon} />
                                    </span>
                                </a>
                            </div>
                        );
                    })}
                    <div className="column" />
                </div>
            </div>
            <div
                style={{
                    position: 'static',
                    color: 'gray',
                    fontSize: '.875rem',
                }}
            >
                <ShowBuildAndVersion />
            </div>
        </section>
    );
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.articles };
};

const Aaa = connect(mapStateToProps)(Hero);
export default Aaa;

这里是减速器：

import { FOUND_BAD_WORD, DATA_LOADED, ADD_ARTICLE } from '../constants/action-types';

const initialState = {
    articles: [],
    remoteArticles: [],
    badword: '',
};

export default function reducer(state = initialState, action) {
    if (action.type === ADD_ARTICLE) {
        return { ...state, articles: state.articles.concat(action.payload) };
    }

    if (action.type === FOUND_BAD_WORD) {
        return Object.assign({}, state, {
            badword: state.badword = action.payload[0],
        });
    }

    if (action.type === DATA_LOADED) {
        return { ...state, remoteArticles: action.payload };
    }
    return state;
}

【问题讨论】：

尝试在组件的返回部分之前记录article，以查看在向服务器发出请求之前它是否具有初始渲染时的数据
@a_m_dev 谢谢我在reducer 的VsCode 中放置断点，因为它保存了payload，它停止了，我看到了payload 的内容。然后我在Hero 开头放置断点，它们永远不会触发。就像mapStateToProps 不工作或者reducer 没有保存到映射状态支持的remoteArticles 有什么建议吗？

标签： reactjs react-redux redux-saga

【解决方案1】：

articles 是 reducer 中的一个数组，但您将其视为组件中的一个对象。这就是您收到未定义错误的原因。

【讨论】：