我一直在尝试使用React 16.7-alpha中的新钩子系统，并且当我处理的状态是对象或数组时，在useEffect中陷入了无限循环。
首先，我使用useState并将其初始化为空对象，就像这样：
const [obj, setObj] = useState({});
然后，在 useEffect 中，我使用 setObj 将其设置为空对象。作为第二个参数，我传递 [obj]，希望如果对象的内容没有更改它就不会更新。但它一直在更新。我想这是因为无论内容如何，这些始终是不同的对象，让 React 认为它一直在更改？
useEffect(() => {
setIngredients({});
}, [ingredients]);
数组也是如此，但作为一个原始类型，它不会像预期的那样陷入循环中。
使用这些新钩子，当检查内容是否已更改时，我应该如何处理对象和数组？
将一个空数组作为第二个参数传递给 useEffect，使其仅在挂载和卸载时运行，从而停止任何无限循环。
useEffect(() => {
setIngredients({});
}, []);
在https://www.robinwieruch.de/react-hooks/的React hooks博客文章中，这个问题对我有了更明确的解答。
我有同样的问题。不知道为什么他们在文档中没有提到这一点。只想在Tobias Haugen的答案中添加一点内容。
要在每个组件/父组件重新渲染时运行，您需要使用：
useEffect(() => {
// don't know where it can be used :/
})
要在组件挂载（只渲染一次）后仅运行一次任何内容，您需要使用：
useEffect(() => {
// do anything only one time if you pass empty array []
// keep in mind, that component will be rendered one time (with default values) before we get here
}, [] )
const [data, setData] = useState(false)
const [data2, setData2] = useState('default value for first render')
useEffect(() => {
// if you pass some variable, than component will rerender after component mount one time and second time if this(in my case data or data2) is changed
// if your data is object and you want to trigger this when property of object changed, clone object like this let clone = JSON.parse(JSON.stringify(data)), change it clone.prop = 2 and setData(clone).
// if you do like this 'data.prop=2' without cloning useEffect will not be triggered, because link to data object in momory doesn't changed, even if object changed (as i understand this)
}, [data, data2] )
我通常如何使用它：
export default function Book({id}) {
const [book, bookSet] = useState(false)
const loadBookFromServer = useCallback(async () => {
let response = await fetch('api/book/' + id)
response = await response.json()
bookSet(response)
}, [id]) // every time id changed, new book will be loaded
useEffect(() => {
loadBookFromServer()
}, [loadBookFromServer]) // useEffect will run once and when id changes
if (!book) return false //first render, when useEffect did't triggered yet we will return false
return <div>{JSON.stringify(book)}</div>
}
[]。const obj = { keyA: 'a', keyB: 'b' }
useEffect(() => {
// do something
}, [obj.keyA, obj.keyB]);
0传递到依赖数组中吗？ - one-hand-octopus}, ...[Object.values(obj)]); ...，第一个解决方案将会起作用，或者你可以简单地删除方括号}, Object.values(obj)); ...。 - vtolentino如果你正在构建一个自定义 hook，有时候默认值可能会导致无限循环，如下所示
function useMyBadHook(values = {}) {
useEffect(()=> {
/* This runs every render, if values is undefined */
},
[values]
)
}
解决方法是使用同一个对象而不是在每个函数调用时创建一个新的对象:
const defaultValues = {};
function useMyBadHook(values = defaultValues) {
useEffect(()=> {
/* This runs on first call and when values change */
},
[values]
)
}
如果您在组件代码中遇到这个问题，使用defaultProps而不是ES6默认值可能会修复循环。
function MyComponent({values}) {
useEffect(()=> {
/* do stuff*/
},[values]
)
return null; /* stuff */
}
MyComponent.defaultProps = {
values = {}
}
你的无限循环是由于循环性引起的
useEffect(() => {
setIngredients({});
}, [ingredients]);
setIngredients({});会改变ingredients的值（每次返回一个新引用），这将运行setIngredients({})。要解决这个问题，您可以使用以下两种方法之一：
const timeToChangeIngrediants = .....
useEffect(() => {
setIngredients({});
}, [timeToChangeIngrediants ]);
setIngrediants会在timeToChangeIngrediants发生变化时运行。
Object.values(ingrediants)作为第二个参数传递给useEffect。useEffect(() => {
setIngredients({});
}, Object.values(ingrediants));
我不确定这对你是否有效，但你可以尝试像这样添加 .length：
useEffect(() => {
// fetch from server and set as obj
}, [obj.length]);
在我的情况下（我正在获取一个数组！），它在挂载时获取数据，然后只会在更改时再次获取数据，而不会进入循环。
如文档所述 (https://reactjs.org/docs/hooks-effect.html)，useEffect hook 用于在每次渲染后执行一些代码。根据文档：
useEffect 每次渲染后都会运行吗？是的！
如果您想要自定义此功能，可以按照同一页中稍后出现的说明进行操作 (https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)。基本上, useEffect 方法接受一个第二个参数，React 将检查它以确定是否需要再次触发效果。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
您可以将任何对象作为第二个参数传递。如果该对象保持不变，您的 effect 只会在首次挂载后触发。如果该对象发生更改，则 effect 会再次触发。
如果你在 useEffect 的最后包含一个空数组：
useEffect(()=>{
setText(text);
},[])
它只会运行一次。
如果你也在数组上包含参数：
useEffect(()=>{
setText(text);
},[text])
只要文本参数更改，它就会运行。
const [ingredients, setIngredients] = useState({});
useEffect(() => {
setIngredients({
...ingredients,
newIngedient: { ... }
});
}, [ingredients]);
在这种情况下，eslint(react-hooks/exhaustive-deps)强制我（正确地）将ingredients添加到依赖项数组中。然而，这会导致无限重新渲染。与该帖子中一些人所说的不同，这是正确的，您不能通过将ingredients.someKey或ingredients.length放入依赖项数组中来解决问题。
解决方案是setter提供了旧值，您可以引用它。您应该使用此方法，而不是直接引用ingredients：
const [ingredients, setIngredients] = useState({});
useEffect(() => {
setIngredients(oldIngedients => {
return {
...oldIngedients,
newIngedient: { ... }
}
});
}, []);
array 中的值类型都无关紧要。如果我们在effect内部使用ingredients进行计算，则应将其包含在array中。const [ingredients, setIngredients] = useState({});
// This will be an infinite loop, because by shallow comparison ingredients !== {}
useEffect(() => {
setIngredients({});
}, [ingredients]);
// If we need to update ingredients then we need to manually confirm
// that it is actually different by deep comparison.
useEffect(() => {
if (is(<similar_object>, ingredients) {
return;
}
setIngredients(<similar_object>);
}, [ingredients]);
useEffect钩子中的依赖项。 - emalinga