如何在 React 中调用渲染之前重置 state？

Question

当我单击复制图标时，我正在显示一个弹出窗口。 当我单击复制图标时，我将 state“showPopup”设置为 true。 我的渲染 function 现在看到它是真的，并显示弹出窗口。 如果我在其他任何地方单击，弹出窗口会自动关闭。

到目前为止，一切都很好。

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

但是，“showPopup”之前的state是真不假。 因此，无论我现在在同一个屏幕上的哪个位置单击，我总是显示弹出窗口。 我只希望它在我专门单击复制按钮时出现。

知道如何解决这个问题，我尝试了 componentDidUpdate，如下所示：

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

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

知道如何确保 showPopup 的初始 state 始终重置为 false 吗？

Answer 1

我无法看到您的任何代码的答案是在更改下拉列表时将 showPopup 设置为 false

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

Answer 2

像上面一样，这是我无法看到您的代码的答案。 您需要在弹出窗口中的 onCLose 操作中将 showPopup 设置为 false。 这是我正在谈论的一个懒惰的例子。

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

此事件将在弹出框关闭时触发（包括点击离开），因此您的 state 将设置为 false。

编辑：我使用的是 React state 钩子，我刚刚意识到您使用的是 class 组件，所以它实际上看起来像：

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

但是，对于使用功能组件和 state 挂钩的任何人，请使用上一个答案。

Answer 3

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

您应该在复制组件的名为 onClick 操作的方法中单独更新“showPopup”state，而不是在 componentDidUpdate 中更新它。