Question

我的React组件中有一段这段代码。

我想根据propArray的值创建新对象。像这样的linter抱怨React Hook useEffect has a missing dependency data。但是，如果我向data数组提供useEffect，则会导致无限循环。我认为这是因为我正在更新data中的useEffect对象。

在这种情况下应该怎么做？

const [data, setData] = useState({})
useEffect(() => {
      if (something) {

          const newObj = {
            ...
          }

        setData({data, ...newObj})
      }
}, [something, propArray]);

编辑

尝试包装JSON.stringify（data）并将其作为依赖项传递-原理相同。

还尝试了useRef

const [data, setData] = useState({})
const latestData = useRef(data)

useEffect(() => {
   if (something) {

      const newObj = {
          ...
      }

      latestData.current = newObj
   }
}, [something, propArray]);

但是这样，当我尝试将lastestData.current作为组件传递时，它是空的并且不会重新呈现

Answer 1

您可以将setData写为

    setData(d => ({d, ...newObj}))
    //or maybe you mean
    setData(d => ({...d, ...newObj}))

所以它不依赖于数据的当前值

编辑：根据以上建议修复了您的沙箱 https://codesandbox.io/s/useeffect-basics-nz0st

Answer 2

您可以使用setNames使用previous state的另一个版本，这样我们就不需要任何依赖。

useEffect(() => {
    if (contentLoading) {
      const newNames = { a: "aa" };
      setNames(prevState => ({ ...prevState, ...newNames }));
    }
}, [contentLoading]);

有关如何在previous state中使用setState的更多信息，可以参考this。

您也可以参考When to use functional setState。

如果我将对象作为依赖项传递，则useEffect中的无限循环

2 个答案: