使用历史记录位置密钥反应UseEffect

如果查询字符串中包含“ 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”)无效   依赖性,因为对其进行突变不会重新渲染组件

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

zwl3074 回答:使用历史记录位置密钥反应UseEffect

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

状态应包含

isModalOpen: Boolean

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

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

{qs === "newcc" ? return newCC : null}
{...rest of component}
本文链接:https://www.f2er.com/2974809.html

大家都在问