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