React缺少一个依赖项：'reduxArray‘。要么包含它，要么删除依赖数组。

Question

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

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

这实际上满足了我的要求，对我来说也很好，但Eslint对此并不满意，并给出了错误React useEffect缺少一个依赖项：'reduxArray‘。要么包含它，要么删除依赖数组。

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

Answer 1

我不知道这是否是一个好的解决方案，但如果你想删除隐形眼镜警告，那就用

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

Answer 2

我喜欢的解决方案是在函数中使用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])