我为一个带有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。我们的想法是显示带有详细信息页面网址的项目列表（例如localhost / items / 50），在那里，我会显示一个按钮来编辑该项目，或删除。那就是我开始迷路的地方。我最终使项目详细信息页面成为一个有状态的组件，它们都崩溃了。我不知道哪个组件应该是有状态的，以便制作这样的网页。此外，需要使用方法手动更新表单，以便能够在其中写入。我最终得到了许多有状态的组件，只是为了让它工作，但我确信有更好的方法来解决这个问题。你能给我一些关于这样一个项目结构的见解吗？
tl; dr ：我需要有关CRUD的结构和“层次结构”的帮助，其中包含一个页面，其中包含您可以单击的项目列表，并转到包含该项目详细信息的另一个页面以及编辑和删除它的选项。此外，在项目列表中，我需要一个指向另一个视图的链接，我可以在其中创建一个新项目。哪些组件应该是有状态的？我见过的每个例子都很简单，他们没有像这样处理一个非常基本的问题。他们使用模拟数据，模拟方法，最终得到的模拟结构在实际场景中不起作用。
感谢。
答案 0 :(得分：0)
props）和州（井...... state）。
以下是我的处理方式：我创建了一个可以处于edit或create模式的ItemDetails组件。它会收到一个项目作为道具（用于编辑和创建）并显示包含您要编辑的所有内容的表单。当表单更改时，新项目将存储在ItemDetails＆＃39;状态并用于渲染。 ItemDetail负责显示保存/删除按钮，点击这些按钮后可以在ItemDetails组件中处理，也可以通过传递给它的相应道具来处理。
这种方法适用于不可变对象。