React / Redux - при переключении между маршрутами рендеринг контента происходит с задержкой

Question

Я новичок в реагировании / редукции, и у меня есть ошибка, которую я не могу исправить.

Существует ошибка между двумя маршрутами, которые отображают разные данные из базы данных.

/ dashboard Маршрут - это компонент рендеринга, который выбирает user.products

/ products Маршрут - это компонент рендеринга, который выбирает all.products

Так что в основномна панели инструментов вы должны видеть только те продукты, которые вы загрузили, а на маршруте продуктов вы можете видеть все загруженные продукты от всех пользователей.

Проблема заключается в том, что при переключении между этими двумя маршрутами содержимоерендеринг с задержкой.При переходе от /products к /dashboard для дроби вы увидите на своей панели все продукты, а затем она будет корректно перерисована

Пример

Компонент панели инструментов отображает ProductsList:

class ProductsList extends Component {
  componentDidMount() {
    this.props.fetchProduct();
  }
render() {
    return <div>{this.renderProducts()}</div>;
  }
}

function mapStateToProps({ products }) {
  return { products };
}

export default connect(
  mapStateToProps,
  { fetchProduct },
)(ProductsList);

Компоненты продуктов отображают AllProductsList:

class AllProductsList extends Component {
  componentDidMount() {
    this.props.fetchAllProduct();
  }
  render() {
    return (
      <div>{this.renderProducts()}</div>
    );
  }
}

function mapStateToProps({ allproducts }) {
  return { allproducts };
}

export default connect(
  mapStateToProps,
  { fetchAllProducts },
)(AllProductsList);

При загрузке /dashboard страницы props.products отображается как пустой массив и после завершения выборки заполняет этот массив.

Когда я перенаправляю со страницы /dashboard на /products, сначала props.allproducts заполняется данными, выбранными для products и после fetchAllProducts() он изменяется

Журнал консоли

Answer 1

Таким образом, для двух API вы держите одну и ту же переменную.Вот почему на долю секунды вы просматриваете данные productsList пользователей при загрузке компонента AllProducts, и наоборот.

Доли секунды - это время, которое требуется API для разрешения или отклонения.Или, возможно, следует указать состояние ожидания API.

Я надеюсь, что это может привести к вашему вопросу и решить проблему.

Пожалуйста, дайте мне знать, если что-то требуется добавить к сообщению.

Answer 2

componentDidMount() {} изменить на componentWillMount(){}

Проблема в том, что у вас есть задержка между fetchRequest и ответом API, также имейте в виду, что вам нужно время для обновления магазина и отображения продуктов.

По-вашему, вы не получите товары, пока магазин не будет изменен.