具有历史记录位置键的UseUseffect

Question

如果显示包含“ newcc”的查询字符串，我将使用useEffect来呈现模态

 useEffect(() => {
        if (qs === "newcc") {
            setShowPaymentModal(true)
        }
    }, [qs]);

每次我单击前一个模态的按钮时，如果该模态已经指向该页面，而该模版直接指向newCC帐户页面，它将不重新呈现该模态（这样就不会再次调用useEffect：]

<Button text="Update Payment Info"
                    onClick={() => {
                        history.push({
                            pathname: '/account',
                            search: 'alert=newcc',
                        })
                    }}
                />

我发现一种解决方法是在依赖项数组中简单包含以下内容：

history.location.key

这会强制重新渲染，因为密钥会在每次按下时更改。我的问题是，这会引起以下错误：

React Hook useEffect具有不必要的依赖性：“ history.location.key”。排除它或删除依赖项数组。外部范围值（例如“ history.location.key”）无效依赖性，因为对其进行突变不会重新渲染组件

简单地忽略此皮棉错误是安全的，还是我以错误的方式来处理这种情况？它确实重新渲染了组件。如果不需要，我讨厌忽略皮棉错误。

Answer 1

听起来，问题在于您试图在一个地方捕获太多的逻辑，并且通过将事物分开来进行管理比较容易。

状态应包含

isModalOpen: Boolean

&&组件的呈现器应包含路径名的逻辑检查。

在渲染/功能组件的返回中

{qs === "newcc" ? return newCC : null}
{...rest of component}