Question

曾经在复杂的React应用程序中使用Redux。我将一些数据置于redux状态，并使用此数据来渲染组件。然后，您想更改页面，我确实需要将某些字段重置为redux状态。这些字段用于呈现先前的组件。因此，如果我在进入下一页之前重置状态，则前一页会重新渲染并抛出错误，因为数据丢失（由于重置）。但是我无法在下一页进行重置，因为该页面存在很多流程，因此很难管理何时重置和何时不重置。

在React应用程序中如何管理此类问题？所有示例都经过简化以显示问题。在实际应用中，有很多字段需要重置。

所以，第1页还原状态

{field: someValue}

组件使用字段值

function myComponent(props) => {
  return (props.field.someMappingOperation());
}

现在，当转到第2页时，该字段应为null，因此我们将其重置还原状态

{field: null}

上方的组件重新呈现，由于以下原因引发错误

   props.field.someMappingOperation()

，并且该字段为空。可以做的是加载下一页，因此该组件不在该页面中，然后重置状态。但是，这变得非常难以管理，因为您位于B页中（假设客户端列表中的列表保存在redux中），并且您想查看转到C页的客户端的详细信息，当您按回去时，您不会想要再次重置状态。因此，您在重置上添加了条件。但是，由于应用程序中有很多流程，因此可以通过多种方式访问该页面。每种方法都有条件不是我想的最佳解决方案。

编辑：我想补充一点，最初不需要状态重置，并且组件不是为此而设计的。随着应用程序的增长和变得足够复杂，它变得很有必要。我正在寻找一种不需要我在每个组件（例如

）中添加props值检查的解决方案

{this.props.field && <ComponentThatUsesField />}

这确实是很多工作，而且容易出错，因为我可能会错过一些领域。

由于该应用程序具有许多页面并管理许多不同的数据，因此存储结果足够大，不希望对其进行克隆。

Answer 1

您必须以更具弹性的方式设计组件，以使它们在输入为空时不会崩溃。

例如：

render() {
  return (
    { this.props.field && <ComponentUsingField field={this.props.field} />}
  )
}

那是一个虚拟的例子，但您明白了。

Answer 2

您可以按以下方式更改代码：

function myComponent(props) => {
const {fields} = props;
return (fields && fields.someMappingOperation());
}

这不会引发任何错误，是安全的检查

Answer 3

您不需要使用条件或重置状态，reduce可以对其进行更新并将其提供给您的组件。您可以在componentDidMount()中调用操作并覆盖先前的值，以便它们在您的组件中可用。我认为这对您的每个组件都应隐含，因为您为每个组件使用了不同的字段值。

在不破坏反应组件的情况下重置redux状态

3 个答案: