时间戳

首页 > 解决方案 > React/Redux - 在路由之间切换时内容渲染有延迟

javascript - React/Redux - 在路由之间切换时内容渲染有延迟

问题描述

我是 reactjs/redux 的初学者，我有一个无法修复的错误。

从数据库呈现不同数据的 2 条路由之间存在错误。

/dashboard路由正在渲染正在获取 user.products 的组件

/products 路由正在渲染正在获取 all.products 的组件

所以基本上在仪表板路线上，您应该只看到您上传的那些产品，而在产品路线上，您可以看到所有用户上传的所有产品。

问题是，每当您在这两个路由之间切换时，内容都会延迟呈现。/products当您为一小部分路由时，/dashboard您将在仪表板上看到所有产品，然后它将正确重新呈现

例子

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);

Products 组件呈现 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()它会更改

控制台日志

标签： javascriptreactjsreact-reduxreact-router

解决方案

因此，对于两个 api，您持有相同的变量。这就是为什么在加载 AllProducts 组件时，您会在几分之一秒内看到用户的 productsList 数据，反之亦然。

秒的分数是 API 解决或拒绝的时间。或者应该说是 API 的挂起状态。

我希望这可以导致您的问题并解决问题。

请让我知道是否需要在帖子中添加任何内容。

推荐阅读