防止组件重新渲染答案

【问题标题】：Prevent component from re-rendering防止组件重新渲染
【发布时间】：2021-09-17 12:11:06
【问题描述】：

我有一个初学者的反应问题。我知道这可能有一个解释，但我已经尝试了两天没有运气。所以我们开始吧。我做了这个导航栏：

如您所见，每次使用导航时菜单都会关闭。以下代码负责导航：

const OnClickNav = (index: string, dispatch) => {

  const runValidations = null;
  dispatch(FormLayoutActions.updateCurrentView({ newView: index, runValidations }));
};

我希望菜单在导航功能运行后保持打开状态，但状态变量“mounted”总是重置为false。在这里你可以看到代码：

  const [mounted, setMounted] = useState(false);

所以发生的事情是调度运行并且状态变量设置为false。我希望它在导航后保持“真”值，我该如何实现？

【问题讨论】：

添加更多代码。 useState 在哪里？ mounted 在哪里使用？您希望导航何时压缩？

标签： reactjs typescript redux

【解决方案1】：

useState 与 redux 无关，也不会直接受您的调度影响，它是组件本地状态。如果您的组件被重新挂载（我假设这里发生了这种情况，但您没有为此添加代码），组件状态将被重置。

我还假设您有多个页面，每个页面都有一个重复的菜单？

无论哪种方式，将您的 mounted 状态（可能称它为 isMenuOpen 或类似名称）移动到 redux 状态应该可以解决您的问题。它将独立于组件的安装。但是你必须创建一个 reducer 并触发一个事件来关闭菜单。

【讨论】：