我不是REACTION用户,但我有一个问题,那就是在执行更新、删除或创建等记录操作后,通常如何刷新HTML表.例如,我们可能有这样一个表:

[New Record]
John    john@mydomain.com   [Edit] [Delete]
Jane    jane@mydomain.com   [Edit] [Delete]

如果按下"编辑"按钮,则会出现一个带有表单的对话框,允许您修改该记录.保存后,如何更新表?我不需要看代码,我只想知道大多数人是怎么做的.

我看到了一段Reaction视频,视频中开发者重定向到了如下页面:

const navigate = useNavigate();
...
navigate(‘/’);

在我看来,这看起来简单而有效,但却是浪费资源,因为你重新构建了整个页面.

我的问题:

  1. 这是在Reaction中处理这种情况的流行方式吗?
  2. 编写一些代码并重新构建表,但不是整个页面,怎么样?
  3. 编写一些更新特定行的代码怎么样?

第一种方法似乎是迄今为止最简单的方法,因为您不需要编写任何额外的代码.第二种 Select 似乎需要一些额外的代码,但对资源更友好.第三个选项花费了开发人员最多的精力,但它只针对特定的行,例如删除或更新它.

我只想听听你对这件事的看法,谢谢.

推荐答案

您可以创建一个状态来保存表数据,并创建另一个布尔状态来控制UI.
当用户单击按钮添加新记录时,您将切换您的第二个状态,以便组件重新呈现,并且基于此状态,在JSX中,您决定是显示表还是可以在其中添加新记录的表单.
然后,当您添加记录时,您当然会更新表状态,也会切换其他状态,以便组件重新呈现,更新的表显示在用户界面中.
要更新特定的行,您可以创建另一个状态(默认为null),在此状态中,如果单击"编辑",您将存储所选行,您将使用所选行( map 迭代的元素)更新此状态,并使用相同的逻辑更新此状态,如果此状态为!== null,则您将显示更新表单,在此表单中,您可以利用状态来显示旧的行数据,更新后,您将更新整个表状态,然后将第三个状态设置为null,以便组件重新呈现,并再次在UI中显示更新后的表

Reactjs相关问答推荐

Next.js:提交表单时状态尚未就绪

左边框不在图表中显示

如何使用.Aggregate从多个集合中获取数据,包括使用Mongoose+NextJS的SUM值

蚂蚁 Select .列表弹出窗口不会';有时不会出现

为什么我的react 简单计时器项目不起作用?

React-chartjs-2:红色和绿色之间的差距

列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中

console.logs 没有显示在浏览器控制台上,但显示在我的终端上

Mui DataGrid 在第二页和前一页上显示项目时出现问题

如何在 React Hook Form 中使用嵌套对象处理错误验证消息

基于 React/NextJS Timer 的文本淡入/淡出不起作用

如何修改 react/jsx-no-useless-fragment 规则以允许 <>{children}

使用新数据更新时,React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

ReactJS 动态禁用按钮

使用 React Router v6 监听来自不同组件的组件状态变化

Reactjs 表单未反映提交时的更改

如何从 graphql/apollo 中的缓存中清除多个查询

使用输入类型文本对 useState 和日期做出react

如何解决在 react.js 中找不到模块错误

如何根据react 中的 map 功能一次只打开一个弹出窗口?