使用历史位置键反应 UseEffect答案

【问题标题】：React UseEffect with History Location Key使用历史位置键反应 UseEffect
【发布时间】：2020-03-29 17:25:11
【问题描述】：

如果出现包含“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

这会强制重新渲染，因为每次推送都会改变键。我的问题是，这会引发以下 lint 错误：

React Hook useEffect 有一个不必要的依赖： 'history.location.key'。排除它或删除依赖项大批。像“history.location.key”这样的外部范围值无效依赖项，因为改变它们不会重新渲染组件

简单地忽略这个 lint 错误是否安全，还是我以错误的方式处理这种情况？它会重新渲染组件。如果没有必要，我讨厌忽略 lint 错误。

【问题讨论】：

标签： reactjs react-hooks history use-effect

【解决方案1】：

听起来问题在于您试图在一个地方捕获过多的逻辑，而通过将它们分开来管理它更简单。

状态应该包含

isModalOpen: Boolean

&& 组件的渲染应该包含路径名的逻辑检查。

在渲染/功能组件的返回

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

【讨论】：

所以这个问题是当你关闭模式时你切换布尔值（所以现在它处于关闭状态）然后当你点击上一个模式时说你没有支付它不会再次打开 newCC 模态，因为现在模态已切换为关闭/状态不会通过 history.push/ 重置，但 history.location.key 会更改
您是否尝试过完全删除依赖数组？只需 useEffect(() => { ...content })
不断重新渲染/模式始终存在，因为 setShowPaymentModal(true) 在 useEffect 挂钩内
或者，使用Effect(() => { ..content}, []) 来模拟componenDidMount？
history.location.key 更改时不会重置。我想我只是将它留在里面并暂时忽略警告