如何在React中调用render之前重置状态

Question

当我点击一个复制图标时，我会显示一个弹出菜单。当我单击复制图标时，我将状态"showPopup"设置为true。我的渲染函数现在看到它是真的，并显示弹出窗口。如果我在外面其他地方点击，弹出窗口会自动关闭。

到目前为止还不错。

问题是我在同一个屏幕上有一个下拉列表，里面有一个选择列表。当我单击下拉列表中的任何选择时，它还会更改状态中的另一个变量，从而导致重新渲染。

但是，"showPopup"的上一个状态是true而不是false。所以，无论我现在在同一个屏幕上点击哪里，我都会显示弹出窗口。我只希望它在我特别单击复制按钮时显示。

想知道如何解决这个问题吗，我试过componentDidUpdate，就像这样：

componentDidUpdate = (prevProps, prevState) => {
if (prevState.showPopup === true) {
this.setState({showPopup: false});
}};

但当我第二次尝试再次单击复制图标时，这会导致问题。这一次弹出窗口将只出现每2次我点击复制图标。。。

知道如何确保showPopup的初始状态总是重置为false吗？

Answer 1

在无法查看任何代码的情况下，我的答案是在下拉菜单更改时将showPopup设置为false

<select onChange={() => this.setState({showPopup: false})}>
<option></option>
</select>

Answer 2

您还没有共享您的代码，所以我在没有看到您的代码的情况下提供了我的解决方案。

您应该在复制组件的一个名为onClick操作的方法中单独更新"showPopup"状态，而不是在componentDidUpdate中更新它。

Answer 3

和上面一样，这是我在看不到代码的情况下的答案。您需要在弹出窗口中的onCLose操作中将showPopup设置为false。这是我所说的一个懒惰的例子。

<Popover onClose={() => setShowPopup(false)} />

每当popover关闭(包括点击离开(时，都会触发此事件，因此您的状态将设置为false。

编辑：我使用React状态挂钩，我刚刚意识到你使用的是一个类组件，所以它实际上看起来像：

<Popover onClose={() => this.setState({showPopup: false})} />

但是，对于任何使用功能组件和状态挂钩的人，请使用前面的答案。