反应 redux 渲染数据

Question

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

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

case FETCH_GALLERY_SUCCESS:
return {
...state,
loading: false,
// stories: state.stories.concat(action.payload),
stories: [...state.stories, ...action.payload],
currentPage: action.currentPage,
totalPages: action.totalPages,
totalStories: action.totalStories,
error: ""
}

我终于找到了这个：

case FETCH_GALLERY_SUCCESS:
            return {
                ...state,
                loading: false,
                stories: [...state.stories, ...action.payload].filter( 
                    (storie, index) => index === [...state.stories, ...action.payload].findIndex( 
                        elem => elem.id === storie.id && elem.id === storie.id
                        )
                    ),
                currentPage: action.currentPage,
                totalPages: action.totalPages,
                totalStories: action.totalStories,
                error: ""
            }

Answer 1

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

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

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

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

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