javascript - 我应该如何在这里使用 shouldComponentUpdate 来更新 React.js 中的父状态？

Question

我是 React.js 新手，我在父组件状态更新方面遇到问题。我附上了完整的代码，这样就不会错过一些重要的东西。

我需要“重置”按钮来重置父组件的状态

<强> HERE 你可以看到问题是什么。

您应该在导航器菜单中打开“事件”并尝试选择类别，然后重置它们。

父组件:components/events/filter-bar.js

chils组件:components/shared/dropdown/category.js

Answer 1

因此，FilterBar 和 Category 组件状态中有类别 - 它们不同步。由于 FilterBar 还接收 categories 作为 prop - 这表明您没有单一事实来源对于类别。至少有三个地方可以将类别保留在不同的组件状态中。这是非常糟糕的事情，会导致错误并且难以维护状态。解决方案是将类别状态仅放在一处，然后将其传递给需要它们的组件(以及更新类别的方法)。

无论如何，如果您想要仅重置下拉类别，那么您可以这样做:

1. 在FilterBar中创建一个新方法，将其命名为您想要的名称并将其作为 Prop 传递给Categories组件。此方法只接受一个参数 - 类别数组。此方法将更新 FilterBar state.categories。

2. 在Categories组件中，删除state.selected和saveSelected方法。在您使用 saveSelected 的地方，将其替换为从 FilterBar 传递的 prop(函数/方法)。

更新

这个问题实际上与组件生命周期或更新父状态无关。

有一件事:您无法控制不属于您的状态(第三方组件就是这种情况)。一些库作者提供了设置初始状态或重置的方法，但您使用的组件库并非如此。

就您而言，最好的办法是卸载下拉广告，然后再次安装它们。这就像只刷新页面的一部分。

这样做:

1. 将 visible: true 添加到 FilterBar 状态
2. 将 onReset 方法添加到同一组件:

onReset = () => {
    this.setState(
      state => ({ visible: false }),
      () => {
        this.setState({ visible: true });
      }
    );
  };

更新重置按钮:onClick={this.onReset}

有条件地渲染 ButtonToolbar:

return this.state.visible ? <ButtonToolbar /> : null // have shortened code just for demonstration purpose