反应可堆叠的小吃吧/吐司

时间:2019-08-02 08:15:42

标签: reactjs react-hooks snackbar

我正在创建自己的简单小吃店/吐司车。但是,我在按顺序查询它们时遇到了问题。从快餐栏删除快餐栏会导致重新渲染和奇怪的行为。

基本流程: 单击一个按钮,该按钮将引发withSnackbar HOC提供的addSnack函数。

从fired函数中获取参数,并相应地创建小吃并将其添加到小吃栏列表中。

最后,我们渲染小吃栏列表。

每个小吃店都控制自己的外观和消失,并由超时来控制。触发超时后,它将调用removeSnack函数,该函数应该从列表中删除第一个零食。

codesandbox

例如,如果单击按钮,则在短时间内四次。它们的渲染效果很好,但是当第一个被删除时,它们都会消失并异常地重新出现。

我了解到这部分是由于状态重新呈现所致,但是,我不确定如何以一种优雅地处理移除方式而又不影响其他零食呈现的方式来处理它。

2 个答案:

答案 0 :(得分:0)

如果查看splice文档,您会发现它返回的是删除元素数组,而不是初始数组。

您可以通过拼接然后更新来纠正它:

snacks.splice(-1, 1);
addSnacks(snacks);

但是,您仍然会有一些奇怪的行为,您可能需要使用keyed list来解决。

答案 1 :(得分:0)

因此,在经过数小时的反复试验之后,我找到了目前可以使用的解决方案。在州外移动和阅读零食有助于解决奇怪的渲染问题,有了它,我得以创建一个效果很好的消息队列。

工作示例 Codesandbox