无限循环效应

Question

我一直在玩React 16.7-alpha中的新钩子系统，当我处理的状态是一个对象或数组时，我陷入了useEffect中的无限循环中。

首先，我使用useState并用一个像这样的空对象启动它：

const [obj, setObj] = useState({});

然后，在useffect中，我使用setObj再次将其设置为空对象。作为第二个参数，我正在传递[obj]，希望如果对象的内容没有改变，它不会更新。但它一直在更新。我猜是因为无论内容是什么，它们总是不同的对象，使它们不断变化？

useEffect(() => {
  setIngredients({});
}, [ingredients]);

数组也是如此，但是作为一个原语，它不会像预期的那样陷入循环。

使用这些新的钩子，在检查内容是否更改时，我应该如何处理对象和数组？

Answer 1

我也遇到过同样的问题，我通过确保在第二个参数[]中传递原语值来解决了这个问题。

如果您传递一个对象，React将只存储对该对象的引用，并在引用更改时运行效果，这通常是每一次（我现在不知道如何）。

解决方案是传递对象中的值。你可以试试，

const obj = { keyA: 'a', keyB: 'b' }

useEffect(() => {
  // do something
}, [Object.values(obj)]);

或

const obj = { keyA: 'a', keyB: 'b' }

useEffect(() => {
  // do something
}, [obj.keyA, obj.keyB]);

Answer 2

也有同样的问题。我不知道为什么他们没有在文档中提到这一点。只是想给托比亚斯·豪根的回答增加一点。

要在每个组件/父级重新渲染器中运行，您需要使用：

  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
  }, [] )

要在组件装载和数据/数据2更改上一次性运行任何内容，请执行以下操作：

  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>  
}

Answer 3

将一个空数组作为第二个参数传递给使用效果会使它只在挂载和卸载时运行，从而停止任何无限循环。

useEffect(() => {
  setIngredients({});
}, []);

这是在React hooks的博客文章中向我澄清的https://www.robinwieruch.de/react-hooks/