这个减速器有什么问题，因为它无法识别 json 我认为

Question

我学习了 React Redux 并且可能卡在了如何设置我的 reducer 上，所以它明白我的 Redux-Saga 正在获取的是一个 json 文件。我已经测试过 Saga 正在获取 json 并且我的减速器保存了它但是 function Hero({ articles }) {.... 抱怨：

TypeError: Cannot read property 'label' of undefined

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

Answer 1

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

这个减速器有什么问题，因为它无法识别 json 我认为

What's wrong with this reducer since it cant recognize a json I think

reactjs

redux-saga

react-redux