React.js CRUD 最佳实践和组件层次结构？

Question

我使用 React 和带有 REST API 的 Spring Boot 后端为项目列表制作了一个小 CRUD。我从一个有状态的 App.jsx 组件开始，它具有进行 GET 调用以获取所有项目的逻辑。这些项目被提取到一个名为 ListItems 的无状态组件中，列表中的每个项目都是另一个名为 Item 的组件。所以，层次结构是这样的：

App (renders ListItems) -> ListItems (stateless, renders many Items) -> Item (stateless)

然后我尝试使用 React Router。我在 App 中添加了路由，在 ListItems 中添加了链接，以便将来单击列表中的项目并转到其详细信息。

但后来事情开始变得混乱。我需要一个 DELETE、POST 和 PUT 方法，它涉及两种形式：一种用于创建新项目，另一种用于编辑它。我创建了一个包含某个项目详细信息的新组件，称为 ItemDetails。这个想法是显示带有 url 到其详细信息页面的项目列表（例如 localhost/items/50），并在其中显示一个按钮来编辑该项目或删除。那就是我开始迷路的地方。我最终使项目详细信息页面成为有状态的组件，但它都崩溃了。我不知道哪些组件应该是有状态的才能制作这样的网页。此外，需要使用方法手动更新表单以便能够写入它们。我最终得到了很多有状态的组件，只是为了让它工作，但我确信有更好的方法来解决这个问题。你能给我一些关于这样一个项目的结构的见解吗？

tl;dr：我需要有关 CRUD 的结构和“层次结构”的帮助，它由一个包含项目列表的页面组成，您可以单击并转到包含该项目详细信息的另一个页面以及编辑和删除它的选项。此外，在项目列表中，我需要一个指向另一个视图的链接，我可以在其中创建新项目。哪些组件应该是有状态的？我见过的每一个例子都非常简单，而且它们并没有像这样解决一个非常基本的问题。他们使用模拟数据、模拟方法，最终得到一个在实际场景中不起作用的模拟结构。

谢谢。

Answer 1

不要担心事物是有状态的还是无状态的。考虑 API（即props）和状态（嗯...state）。

下面是我将如何进行：我将创建一个 ItemDetails 组件，该组件可以处于 edit 或 create 模式。它将接收一个项目作为道具（用于编辑和创建）并显示一个包含您要编辑的所有内容的表单。当表单发生变化时，一个新的 Item 将被存储在 ItemDetails 的状态中并用于渲染。 ItemDetail 负责显示保存/删除按钮，点击这些按钮时发生的任何事情都可以在 ItemDetails 组件中处理，也可以通过传递给它的适当道具来处理。

这种方法适用于不可变对象。