Рендеринг старых данных - PullRequest
       58

Рендеринг старых данных

0 голосов
/ 07 января 2019

Мое приложение - это набор статей, вы нажимаете одну, и вы попадаете на страницу статьи. Моя проблема в том, что когда я просматриваю статью, возвращаюсь, а затем просматриваю другую, она отображает содержимое первой статьи на мгновение, пока не обновится состояние избыточности. Есть ли способ это исправить? Я удалил 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>

Обратите внимание, что эти маршруты предоставляются "BrowserRouter" из response-router-dom

Редактировать: у меня было "... состояние" в редукторе. Я удалил его, и он немного ускорился, однако есть еще миллисекунда, где он показывает старые данные.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...