Question

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

两条路由之间存在一个错误，这些错误正在从数据库呈现不同的数据。

/仪表板路由是正在获取user.products的呈现组件

/ 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()完成之后它会改变

Console log

Answer 1

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

秒的分数是API解析或拒绝所花费的时间。也许应该说是API的待处理状态。

我希望这可以引起您的问题并解决问题。

请告诉我该帖子是否需要添加任何内容。

Answer 2

componentDidMount() {}更改为componentWillMount(){}

问题是fetchRequest和API响应之间存在延迟，还请记住，您需要时间来更新存储和渲染产品。

以您的方式，直到商店没有更改，您都不会得到产品。

React / Redux-在路由之间切换时，内容呈现存在延迟

2 个答案: