一个页面显示一个对象列表[{name:, age:}, ...]第二个页面允许更新一个特定对象的名称。然后使用钩子,我应该如何实现useEffect(),以便只有当检测到名称更改时,才更新首页上的列表?
[{name:, age:}, ...]
useEffect()
const [objects, setObjects] = useState([]);useEffect(()=> { getAllObjects()},[getAllObjects, objects]);
const [objects, setObjects] = useState([]);
useEffect(()=> {
getAllObjects()
},[getAllObjects, objects]);
字符串
sz81bmfz1#
不要将整个对象传递给依赖数组,而是确保只传递name。
const [objects, setObjects] = useState([])useEffect(()=> { getAllObjects()}, [getAllObjects, ...objects.map(item => item.name)])
const [objects, setObjects] = useState([])
}, [getAllObjects, ...objects.map(item => item.name)])
fumotvh32#
检查https://dev.to/aileenr/til-you-can-watch-for-nested-properties-changing-in-react-s-useeffect-hook-26nj我们可以做的就是:
useEffect(()=> { // do something}, [values.name])
// do something
}, [values.name])
字符串如果object属性总是存在,这是一个很好的解决方案,但是如果属性在某个时候不存在,则会出现引用错误。
useEffect(()=> { if (values?.name) { // do something }}, [values])
if (values?.name) {
}
}, [values])
型
9fkzdhlc3#
之前的答案对我都不管用这是我的解决方案:
const [objects, setObjects] = useState([]);useEffect(()=> { getAllObjects()},[getAllObjects, ...Object.values(objects)]);
},[getAllObjects, ...Object.values(objects)]);
字符串通过这种方式,您可以从状态中提取值,一旦这些值发生更改,就会触发useEffect
guykilcj4#
// using JSON.stringify(object)useEffect(() => { // your code here...}, [JSON.stringify(dependencyObject)]);
// using JSON.stringify(object)
useEffect(() => {
// your code here...
}, [JSON.stringify(dependencyObject)]);
最好的解决方案是使用JSON.stringify(object),因为它不会导致任何初始加载错误或依赖变量大小变化的警告。
JSON.stringify(object)
// using spread operatoruseEffect(() => { // your code here...}, [ ...Object.values(dependencyObject) ]);
// using spread operator
}, [ ...Object.values(dependencyObject) ]);
型如果对象在初始加载时为null/undefined,则在对象键和值上使用spread操作符的解决方案将导致错误。
/* Also if you make a custom function that either returns the values or empty array then React will give a warning about the size change in dependency array.*/const getDependencies = (addressType: Address) => {if (addressType) { return Object.values(addressType);}return [];}useEffect(() => { // your code here...}, [ ...getDependencies(dependencyObject) ]);
/*
Also if you make a custom function that either returns the
values or empty array then React will give a warning about
the size change in dependency array.
*/
const getDependencies = (addressType: Address) => {
if (addressType) {
return Object.values(addressType);
return [];
}, [ ...getDependencies(dependencyObject) ]);
型所以使用JSON.stringyfy(object)。当对象未定义或为null时,它不会给予任何错误,React也不会抱怨依赖变量大小的变化。
xggvc2p65#
请为嵌套对象添加JSON.stringify。
useEffect(()=> { getAllObjects()},[getAllObjects, JSON.stringify(objects)]);
},[getAllObjects, JSON.stringify(objects)]);
5条答案
按热度按时间sz81bmfz1#
不要将整个对象传递给依赖数组,而是确保只传递name。
字符串
fumotvh32#
检查https://dev.to/aileenr/til-you-can-watch-for-nested-properties-changing-in-react-s-useeffect-hook-26nj
我们可以做的就是:
字符串
如果object属性总是存在,这是一个很好的解决方案,但是如果属性在某个时候不存在,则会出现引用错误。
型
9fkzdhlc3#
之前的答案对我都不管用
这是我的解决方案:
字符串
通过这种方式,您可以从状态中提取值,一旦这些值发生更改,就会触发useEffect
guykilcj4#
字符串
最好的解决方案是使用
JSON.stringify(object)
,因为它不会导致任何初始加载错误或依赖变量大小变化的警告。型
如果对象在初始加载时为null/undefined,则在对象键和值上使用spread操作符的解决方案将导致错误。
型
所以使用JSON.stringyfy(object)。当对象未定义或为null时,它不会给予任何错误,React也不会抱怨依赖变量大小的变化。
xggvc2p65#
请为嵌套对象添加JSON.stringify。
字符串