React - 通过状态更新管理条件渲染答案

【问题标题】：React - Manage conditionnal rendering with state updateReact - 通过状态更新管理条件渲染
【发布时间】：2020-10-06 15:31:59
【问题描述】：

我遇到了渲染问题。我有一个模式表单来创建/编辑一个实体（存储在父状态列表中），我呈现一个与列表中每个实体相对应的“卡片”列表。每张卡片上都有一个按钮，用于打开模式表单以编辑实体。问题是，我无法根据当前操作（添加/编辑）和当前对象重新渲染我的表单。

一旦我创建了一个实体，我就被编辑表单困住了，我无法重新渲染一个新表单。这意味着渲染一个新表单，然后将可见性状态设置为 true，这不起作用。

您对如何实现这一点有任何想法吗？

如果您对我的代码沙箱有任何提示或最佳实践，请告诉我！

【问题讨论】：

【解决方案1】：

问题是您尝试使用单个可见性变量管理编辑和添加对话框，因此当您打开添加对话框时，它也会打开编辑对话框。

我认为最好渲染单个对话框，用于编辑和添加，并将打开对话框后要编辑的动物存储在变量中，或者存储 false/null 以防你想创建新动物.

【讨论】：

没错！使用单个函数 (hideFormAndUpdateList) 管理这两种状态非常方便。如何在 AnimalCard 的第一次渲染中获得“无法在现有状态转换期间更新”警告？
@lucas24007 我更新了示例以解决该问题。当您在渲染时尝试修改组件状态时会产生该错误。您可以使用 useEffect(() => { form.setFieldsValue(animal); }, [animal]);所以动物变量中的值在它们改变时被设置为形式。我还将代码拆分为几个组件，以便于阅读

【解决方案2】：

我在这里做了一个例子https://codesandbox.io/s/myzoo-forked-7t9em?file=/index.js:177-198。我认为问题与isVisible 管理这两个表单的状态相同。

因此，当您打开任何表单时，将使用 add 操作调用组件 AnimalForm，然后使用 edit 操作调用。我们只需要在一种情况下调用它。

所以，我只是做了一个小改动，每个表单都有一个变量isVisible。这样表单就可以独立打开了。

【讨论】：