javascript - 反应 useEffect 比较对象
问题描述
我正在使用反应useEffect
钩子并检查对象是否已更改,然后才再次运行钩子。
我的代码看起来像这样。
const useExample = (apiOptions) => {
const [data, updateData] = useState([]);
useEffect(() => {
const [data, updateData] = useState<any>([]);
doSomethingCool(apiOptions).then(res => {
updateData(response.data);
})
}, [apiOptions]);
return {
data
};
};
不幸的是,它一直在运行,因为对象没有被识别为相同。
我相信以下是一个例子。
const objA = {
method: 'GET'
}
const objB = {
method: 'GET'
}
console.log(objA === objB)
也许跑步JSON.stringify(apiOptions)
有效?
解决方案
用作apiOptions
状态值
我不确定您是如何使用自定义钩子的,但是apiOptions
通过使用来创建状态值useState
应该可以正常工作。通过这种方式,您可以将其作为状态值提供给您的自定义钩子,如下所示:
const [apiOptions, setApiOptions] = useState({ a: 1 })
const { data } = useExample(apiOptions)
这样,只有在您使用setApiOptions
.
示例 #1
import { useState, useEffect } from 'react';
const useExample = (apiOptions) => {
const [data, updateData] = useState([]);
useEffect(() => {
console.log('effect triggered')
}, [apiOptions]);
return {
data
};
}
export default function App() {
const [apiOptions, setApiOptions] = useState({ a: 1 })
const { data } = useExample(apiOptions);
const [somethingElse, setSomethingElse] = useState('default state')
return <div>
<button onClick={() => { setApiOptions({ a: 1 }) }}>change apiOptions</button>
<button onClick={() => { setSomethingElse('state') }}>
change something else to force rerender
</button>
</div>;
}
或者
useEffect
您可以按照此处所述编写深度可比性:
function deepCompareEquals(a, b){
// TODO: implement deep comparison here
// something like lodash
// return _.isEqual(a, b);
}
function useDeepCompareMemoize(value) {
const ref = useRef()
// it can be done by using useMemo as well
// but useRef is rather cleaner and easier
if (!deepCompareEquals(value, ref.current)) {
ref.current = value
}
return ref.current
}
function useDeepCompareEffect(callback, dependencies) {
useEffect(
callback,
dependencies.map(useDeepCompareMemoize)
)
}
您可以像使用useEffect
.
推荐阅读
- python - 如何在 reg 表达式中检查大于检查?
- sql-server - 解码十六进制数据类型
- redis - 用于测试 KeyDB 的数据集
- json - _CastError(类型 '_InternalLinkedHashMap
' 不是类型 'List 的子类型 ' 在类型转换中) - jquery - 如何从输入中获取值
- exception - Kotlin 良好实践中的 Catch Exception 类?
- python - Custom scikit-learn scorer can't access mean after fit
- apache-camel - Apache Camel Mail:只有邮件主机时如何发送电子邮件?
- python - sqlalchemy.exc.NoSuchModuleError:无法加载插件:sqlalchemy.dialects:bigquery
- php - 是否可以在 laravel 中使用内核控制台命令中的会话?