反应 redux 渲染数据

Question

我在使用 React 和 Redux 时遇到了问题，我想在这里找到解决方案...在我的应用程序中，我在加载页面 componentDidMount 时有一个函数，该函数调用了一个在我的页面上列出图像的函数。我也有一个调用相同功能的按钮。

我的问题：当我点击按钮时，虽然我已经有显示图像的列表，但我有两次相同的列表，如果我再次点击，相同的新图像会被添加。只有当我重新加载页面时，一切才回到开始时的状态，我徒劳地搜索，Redux 保留数据并在每次调用时添加相同的数据，除非我们重新加载页面。

.

最后我发现了这个：

[$%^*+=,./<>_-]

Answer 1

Nick 已经在评论中说明了这一点，但要解释更多：

stories: [...state.stories, ...action.payload],

这归结为 ... 展开运算符的工作方式。它采用原始的预操作 state.stories，将其散布在一个数组中，然后通过散布新到达的 action.payload 进行跟进。基本上，您已经使用新到达的信息扩展了最初存在的内容。如果您的新信息只是旧信息的重复，您会在第二个操作中看到一个重复的批次，然后在第三个操作中看到一个重复的批次，依此类推。每个后续 FETCH_GALLERY_SUCCESS 基本上都会添加已有内容的另一个副本（假设新获取的图库 stories 与旧的相同）。

解决这个问题的一些方法：

• 如果您只关心最近获取的内容，只需将其更改为 stories: action.payload。您之前拥有的内容已被删除，但这可能没问题，具体取决于您的用例。 （看起来您还需要更新您的 totalStories 和其他此类值。）
• 也许以后的 fetch 会提供新的、额外的图像，而不是已经存在的图像？如果是这种情况，您可以对新获取的批次执行某种 array .filter 操作以过滤掉重复项，然后将非重复项添加到 Redux stories 键的前端或末尾与您现在拥有的时尚相似。
• 如果您有不同的用例，也许还有其他用途？您可以在执行新状态的 return 之前进行预处理步骤，该步骤可以访问旧的 stories 状态（通过 state.stories）和新获取的故事负载（通过action.payload）。编写一些代码来创建任何新的组合 stories 状态应该是结果，然后在最后返回它。不要忘记也在自定义代码中处理其他状态键，例如 totalStories。