Reactjs 避免使用react+显示旧数据；雷杜。始终等待提取完成

我在这本指南中找到：

我有一个非常标准的减速机，可以处理数据、加载和错误：

import {
  FETCH_PRODUCTS_BEGIN,
  FETCH_PRODUCTS_SUCCESS,
  FETCH_PRODUCTS_FAILURE
} from './productActions';

const initialState = {
  items: [],
  loading: false,
  error: null
};

export default function productReducer(state = initialState, action) {
  switch(action.type) {
    case FETCH_PRODUCTS_BEGIN:
      return {
        ...state,
        loading: true,
        error: null
      };

    case FETCH_PRODUCTS_SUCCESS:
      return {
        ...state,
        loading: false,
        items: action.payload.products
      };

    case FETCH_PRODUCTS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload.error,
        items: []
      };

    default:
      return state;
  }
}

然后调用动作并基于这些状态绘制的组件：

import React from "react";
import { connect } from "react-redux";
import { fetchProducts } from "/productActions";

class ProductList extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchProducts());
  }

  render() {
    const { error, loading, products } = this.props;

    if (error) {
      return <div>Error! {error.message}</div>;
    }

    if (loading) {
      return <div>Loading...</div>;
    }

    return (
      <ul>
        {products.map(product =>
          <li key={product.id}>{product.name}</li>
        )}
      </ul>
    );
  }
}

const mapStateToProps = state => ({
  products: state.products.items,
  loading: state.products.loading,
  error: state.products.error
});

export default connect(mapStateToProps)(ProductList);

从“React”导入React；
从“react redux”导入{connect}；
从“/productActions”导入{fetchProducts}；
类ProductList扩展了React.Component{
componentDidMount（）{
this.props.dispatch（fetchProducts（））；
}
render（）{
const{error，loading，products}=this.props；
如果（错误）{
返回错误！{Error.message}；
}
如果（装载）{
返回装载。。。；
}
返回(

{products.map（product=>
{product.name}
)}

);
}
}
常量mapStateToProps=状态=>({
产品：state.products.items，
加载：state.products.loading，
错误：state.products.error
});
导出默认连接（MapStateTops）（ProductList）；

这在第一次使用时效果很好：

产品为空。因此，第一次渲染将显示空列表。第二次（提取完成后）产品将有项目

现在，问题是如果我从组件外部进入，然后重新进入（例如，使用react路由器），会发生什么

这是它第一次使用redux存储中的缓存信息进行绘制。然后在获取之后，我将重新绘制新列表

有没有办法每次都避免这种情况

我已经想到了一些“解决方案”，但如果它们能起作用/是好的实践，我就不担心了：

在组件状态下设置值“fetchId”（例如，生成随机UUID），并在fetchProducts操作中使用它。该值将保存在redux存储中，并将redux fetchId与组件进行比较。如果他们是一样的，画！如果它们是不同的（fetchId来自不同的调用），我将不绘制任何内容

清理redux存储，调用组件Willumount中的操作

---

将我想要的产品存储在Redux中，仅当产品与用户选择的产品匹配时才渲染该产品。如果不匹配，则获取请求的产品。

将我想要的产品存储在Redux中，并且仅当产品与用户选择的产品匹配时才渲染该产品。如果不匹配，则获取请求的产品。

这个答案没有意义。如果用户有一些产品列表怎么办？有更好的解决办法，像这样抄近路是没有意义的。如果用户有一些产品列表怎么办？有更好的解决办法，像这样偷工减料你有没有找到一个满意的答案？你有没有找到一个满意的答案？