React Hook useEffect 缺少一个依赖项：'reduxArray'。 包括它或删除依赖数组

Question

当数据发生如下变化时，我需要调用 useEffect，

 useEffect(()=>{
     const filteredData = reduxArray.filter(
       () => // do something
 );
     store.dispatch(method({reduxArray:[...filteredData]}))
  },[data])

这实际上满足了我的要求并且对我来说很好，但是 Eslint 对此并不满意，并且给了我错误React Hook useEffect has a missing dependency: 'reduxArray'。 要么包含它，要么删除依赖数组。

在这种情况下，如果我在依赖数组中添加reduxArray ，那么它会导致 useEffect 中的无限循环，因为我正在更新useEffect中的 reduxArray。 除了禁用 eslint 之外，还有其他方法可以克服这个问题吗？

Answer 1

我不知道这是否是一个好的解决方案，但如果你想删除 eslint 警告，那么只需使用

  useEffect(()=>{
   const filteredData = reduxArray.filter(() => // do something);
   store.dispatch(method({reduxArray:[...filteredData]}))
   // eslint-disable-next-line react-hooks/exhaustive-deps
  },[data])

Answer 2

我喜欢的一个解决方案是在 function 中使用 useCallback，这将防止无限循环。

const handleChangeData = useCallback (() => {
    const filteredData = reduxArray.filter();
    store.dispatch(method({reduxArray:[...filteredData]}))
  },[data,reduxArray])

  useEffect(()=>{
    handleChangeData
 },[handleChangeData])

Answer 3

这个问题的一个解决方案是useEvent钩子：

  const filterData = useEvent(()=>{
    const filteredData = reduxArray.filter(
      () => // do something
);
    store.dispatch(method({reduxArray:[...filteredData]}))
  })

  useEffect(()=>{
    filterData()
 },[data])

Answer 4

通过在更新 redux 阵列后简单地保留一个标志来解决它，我不确定这是否是正确的方法，

useEffect(()=>{
     const filteredData = reduxArray.filter(
       () => // do something
     );
if(!flag) {
     store.dispatch(method({reduxArray:[...filteredData]}))
 }
  setFlag(true); // so that it doesn't reupdate infinite times
  },[data])