由于 useSelector 更新而导致 useEffect 循环

Question

我有一个 useEffect

function Component () {
    const facets = useSelector(getFacets)

    useEffect(() => {
        dispatch(search(facets, param2, param3))
    }, [dispatch, facets, param2, param3])
    
    //rest of component with return
}

现在搜索实际上会更新facets

//Inside my slice
const search = (facets, param2, param3) => async(dispatch) => {
   //do a fetch using param2 and param3
   //fetch comes back with a facets object
   //alter response facets object based on 'old' facets
   dispatch(setFacets(newFacets)) // set the new facets
}

问题是，当此 useEffect 运行时，重新渲染会导致const facets = useSelector(getFacets)加载新值... Linting 要求我将其作为facets依赖项，useEffect但将其放在那里意味着它会一遍又一遍地循环。我该如何阻止它？

我尝试将逻辑从 useEffect 中取出并将其放入 useCallback 中，但同样，linting 要求我将其facets作为依赖项放置，这基本上是相同的问题。

Answer 1

解决了

Sooooo Redux 有一些存储方法；dispatch成为其中之一。对我来说，我正在寻找的存储方法是getState。如果您查看此处并使用 cmd/ctrl + F 'getState' 了解更多信息

我认为我无法访问切片内的状态，因为出于明显的原因，React 不允许我useSelector在切片内使用。当时对我来说并不明显的是我可以通过getState

因此，编辑后的代码将如下所示：

1. 删除facets组件内的参数，因为我不再需要它

function Component () {
    //const facets = useSelector(getFacets) --> NO LONGER NEEDED

    useEffect(() => {
        dispatch(search(/*facets, */param2, param3))
    }, [dispatch, /*facets, */param2, param3])
    
    //rest of component with return
}

2. 编辑切片内的函数，删除facets参数并包含getState在旁边dispatch

//Inside my slice
const search = (param2, param3) => async(dispatch, getState) => {
   //do a fetch using param2 and param3
   //fetch comes back with a facets object
   //grab 'old' facets using NEW getState and same selector: getFacets
   oldFacets = getFacets(getState())
   //alter response facets object based on oldFacets
   dispatch(setFacets(newFacets)) // set the new facets
}

瞧，不再有无限循环。