React组件正在重新渲染从状态中移除的项目

罗布·西波拉

这是一个很难解释的问题,所以我会努力的!

我的目标

我一直在学习React,并决定尝试从头开始构建Todo List应用。我想实现一个“推送通知”系统,当您说将待办事项标记为完成时,它将在左下角弹出,例如“ walk狗已被更新”。然后几秒钟左右,它将被从用户界面中删除。

相当简单的目标,并且在大多数情况下我已经实现了目标……但是……如果您迅速将一些待办事项标记为完成,它们将从用户界面中删除,然后重新渲染回去!

我尝试了许多我可以想到的从状态中删除项目的方法,甚至更改了组件插入的位置等。

这可能是一个noobie问题,但我仍在学习!

这是代码沙箱的链接,这是我想到的显示我所在位置的最佳方法:

警报组件状态/父项

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/layout/PageContainer.js

警报组件

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/parts/Alert.js

任何帮助,不胜感激!

英雄流浪汉

如果发生异步事件,则已执行事件处理程序范围内的值可能已过期。

更新值列表时,例如,使用接收先前状态的更新方法。

setAlerts(previousAlerts => {
  const newAlerts = (build new alerts from prev alerts);
  return newAlerts;
});

而不是直接使用alerts从中获得的useState

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在React中重新渲染子组件或更改子状态

来自分类Dev

状态更改后,React组件未重新渲染,但正在调用render()

来自分类Dev

React Native-状态挂钩更新,它正在重新渲染组件,但是什么也没显示

来自分类Dev

React 重新渲染重置组件的悬停状态

来自分类Dev

React 组件正在渲染但在状态更新时未更新

来自分类Dev

当父状态改变时,如何更新(重新渲染)React中的子组件?

来自分类Dev

当react js中的任何状态发生变化时,如何停止重新渲染子组件?

来自分类Dev

如何避免在React中重新渲染组件?

来自分类Dev

React功能组件中的重新渲染逻辑

来自分类Dev

在 React 中重新渲染 AppBar 组件

来自分类Dev

在redux状态的语言环境更新后重新渲染React组件

来自分类Dev

重新渲染时,react组件会重置其状态吗?

来自分类Dev

在redux状态的语言环境更新后重新渲染React组件

来自分类Dev

在重新渲染父组件时,React如何重用子组件/保持子组件的状态?

来自分类Dev

更新目标组件中的全局状态,而无需重新渲染共享全局状态的组件

来自分类Dev

React / Redux 组件重新渲染

来自分类Dev

在数组中,在 React 组件的状态中渲染对象的属性

来自分类Dev

React 组件的状态在渲染中的值与 setState 中的值不同

来自分类Dev

当父组件状态更改时,React路由组件会重新渲染

来自分类Dev

状态更改后从子组件重新渲染

来自分类Dev

更改存储状态后重新渲染组件

来自分类Dev

重新渲染时如何更新组件状态

来自分类Dev

当状态是对象的对象时组件重新渲染

来自分类Dev

状态更改不重新渲染组件

来自分类Dev

当RN 0.61中的状态更改时,如何从主组件中重新渲染子组件?

来自分类Dev

当redux中的状态改变时,react无法重新渲染

来自分类Dev

当父状态在React中更改时停止渲染子组件

来自分类Dev

组件未使用'useEffect'钩子在React中重新渲染

来自分类Dev

重新渲染React和Redux中的所有组件

Related 相关文章

  1. 1

    在React中重新渲染子组件或更改子状态

  2. 2

    状态更改后,React组件未重新渲染,但正在调用render()

  3. 3

    React Native-状态挂钩更新,它正在重新渲染组件,但是什么也没显示

  4. 4

    React 重新渲染重置组件的悬停状态

  5. 5

    React 组件正在渲染但在状态更新时未更新

  6. 6

    当父状态改变时,如何更新(重新渲染)React中的子组件?

  7. 7

    当react js中的任何状态发生变化时,如何停止重新渲染子组件?

  8. 8

    如何避免在React中重新渲染组件?

  9. 9

    React功能组件中的重新渲染逻辑

  10. 10

    在 React 中重新渲染 AppBar 组件

  11. 11

    在redux状态的语言环境更新后重新渲染React组件

  12. 12

    重新渲染时,react组件会重置其状态吗?

  13. 13

    在redux状态的语言环境更新后重新渲染React组件

  14. 14

    在重新渲染父组件时,React如何重用子组件/保持子组件的状态?

  15. 15

    更新目标组件中的全局状态,而无需重新渲染共享全局状态的组件

  16. 16

    React / Redux 组件重新渲染

  17. 17

    在数组中,在 React 组件的状态中渲染对象的属性

  18. 18

    React 组件的状态在渲染中的值与 setState 中的值不同

  19. 19

    当父组件状态更改时,React路由组件会重新渲染

  20. 20

    状态更改后从子组件重新渲染

  21. 21

    更改存储状态后重新渲染组件

  22. 22

    重新渲染时如何更新组件状态

  23. 23

    当状态是对象的对象时组件重新渲染

  24. 24

    状态更改不重新渲染组件

  25. 25

    当RN 0.61中的状态更改时,如何从主组件中重新渲染子组件?

  26. 26

    当redux中的状态改变时,react无法重新渲染

  27. 27

    当父状态在React中更改时停止渲染子组件

  28. 28

    组件未使用'useEffect'钩子在React中重新渲染

  29. 29

    重新渲染React和Redux中的所有组件

热门标签

归档