渲染旧数据

Question

我的应用程序中包含很多文章，您单击一个即可将其带到文章页面。我的问题是，当我查看文章时，返回，然后查看其他文章，它会显示第一篇文章的内容一段时间，直到redux状态更新。有没有办法来解决这个问题？为了使内容简短，我在下面的代码中删除了HTML。

我也尝试将componentDidMount更改为componentWillMount，但是我收到了相同的结果。

我使用redux chrome插件，可以看到当我更改页面时，它仍以状态存储前一篇文章。这个问题似乎源于我目前的整体问题，即应用程序在获取数据导致重新渲染之前先进行渲染。再加上我的文章状态在页面更改时完好无损的事实，导致了此问题。我不知道如何解决这两个问题。

我的动作

export const getArticle = (articleID, history) => dispatch => {
axios
    .get(`/api/articles/${articleID}`)
    .then(res => dispatch({ type: GET_ARTICLE, payload: res.data }))
    .catch(err => history.push("/not-found"));
};

我的减速器：

const initialState = {
    article: null
};

export default function(state = initialState, action) {
    switch (action.type) {
        case GET_ARTICLE:
            return {
                article: action.payload
            };
        default:
            return state;
    }
}

我的反应视图：

componentDidMount() {
    const { articleID } = this.props.match.params;
    this.props.getArticle(articleID, this.props.history);
}

render() {
    const { article } = this.props.article;
    return (HTML HERE);
}

视图底部：

ViewArticle.propTypes = {
    getArticle: PropTypes.func.isRequired,
    article: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    article: state.article
});

export default connect(
    mapStateToProps,
    { getArticle }
)(ViewArticle);

我的路线：

<Switch>
    <Route exact path="/" component={Landing} />
    <Route exact path="/register" component={Register} />
    <Route exact path="/login" component={Login} />
    <Route exact path="/newArticle" component={NewArticle} />
    <Route exact path="/:articleID" component={ViewArticle} />
</Switch>

请注意，这些路由是由react-router-dom中的“ BrowserRouter”提供的

编辑：我在减速器中具有“ ...状态”。我已经删除了它，它加快了很多速度，但是仍然有毫秒显示旧数据。