时间戳

首页 > 解决方案 > 如何在表单中呈现保存的数据以便我可以再次编辑？

reactjs - 如何在表单中呈现保存的数据以便我可以再次编辑？

问题描述

所以我有一个创建订单页面，您可以在其中添加零件编号、数量等……然后您可以单击保存，然后它将此订单保存到后端。我有另一个页面，称为“已保存订单”，它将所有这些已保存订单呈现在表格中的单独行中，每个订单旁边都有一个“编辑”按钮。当您单击“编辑”时，它应该将您重定向到“创建订单”页面，但它应该填充该订单的所有信息，而不是为空。因此，如果您愿意，可以添加更多项目、更改数量等。我该怎么做？我正在寻找一个概念性的答案。

标签： reactjsfrontend

解决方案

所以这就是想法，我们不通过路由甚至道具等传递大量数据。我们可以在这里做的是使用唯一id或任何其他属性，并基于此我们将获取数据并使用它。可以有多种方法来做到这一点，我会给你2：

小设置

为 Editid创建一个以参数为参数的路由，这样对于每个编辑我们都有一个动态路由，如下所示：（ <Route exact path="/order/edit/:id component={CreateOrder} /> 假设 CreateOrder 是目标组件的名称）。

现在，您的编辑按钮应在单击时重定向到相关路线。对于基于类的组件，您的按钮将如下所示：

<button onClick={()=>this.props.history.push(`/order/edit/${id}`)} />

componentDidMount在 CreateOrder 组件上，获取（基于类）或useEffect钩子（基于函数）中的 id 参数的值。

  • 对于基于类，您将使用this.props.match.params.id
  • 对于基于函数的，你可以使用useParams()钩子，比如 let {id} = useParams()

由于您使用相同的组件进行创建和编辑，因此基于 应用检查id，因此如果id不为空，则将您的组件视为编辑否则创建。

如果编辑，那么要么

进行 API 调用

使用 yourid发出获取请求，该请求将获取该特定订单的所有字段，然后将其设置为您的State,

或者

使用浏览器存储

使用浏览器localStorage或任何状态管理工具，如Redux、MobX等，而不是调用 API，id通过使用Array.find()

根据您的需要，您可以选择任何选项。

推荐阅读