Rails/React：在 React 状态下存储“Todo”项目？

Question

所以我作为第一个 React 项目处理 React “Todo”列表，我使用 Rails 作为 API 后端（严格接收和发送回 .json），我对 Rails 或至少基础知识相当熟悉。

目前我有一些组件来处理实际的“列表”。这是一个 ListContainer 父组件（保存“Lists”的状态，它是一个列表数组）以及所有的添加/更新/删除/索引（设置列表初始状态）功能。

连同一些子组件（ListForm 和 List），它们都很容易解释。 List 是一个愚蠢的组件，只包含 List 标题和描述，而 ListForm 是提交新列表的实际表单。

我正在使用 axios，到目前为止，Create/Index/Update/Delete 对列表非常有用。但是，我遇到了不确定如何自己处理列表项的问题。目前在 Rails 端 Lists has_many list_items 和 list_items belong_tolist`。

所以 rails 的关系方面都搞定了……但我真的不确定如何处理 javascript 方面的实际项目（对于每个列表）。

我最初的猜测是将“List”哑组件切换为处理状态的智能组件，在这种状态下将是属于该特定列表的“list_items”数组。加载列表时，我想象 axios 执行 GET 请求以列出组件中的项目。然后基本上处理添加/删除/更新，类似于 ListContainer 组件处理列表的方式（但将“List”组件作为 ListItems 的事实上的容器组件（目前是“哑组件”）

这有意义吗？老实说，我对做出反应还是很陌生，所以在前端处理关系是我还不熟悉的东西。但是，在“belongs_to”父状态/组件的子节点中存储状态最初是最有意义的吗？除非我想多了？

Answer 1

我认为您提出的解决方案是有道理的。按照您的模式，您可能会有另一个组件 ListItem，并且您将映射 List 中的 listItems 状态并为每个项目显示一个 ListItem。

话虽如此，许多学习 React 的人倾向于通过有太多的组件/不同的文件进行交互而使其过于复杂。 React 社区曾一度鼓励这样做，但后来他们放弃了这样做。许多人现在考虑将展示组件（或您称之为“哑”组件）作为反模式。例如，请参阅 Dan Abramov enter link description here 的这篇笔记