React Hooks：在 useEffects 中将对象作为依赖处理

Question

更新：对于用例 1，是的，如果我在 useEffect 之外提取 search.value 并将其用作依赖项，则它可以工作。

但我在下面有一个更新的用例

用例 2：我想将 searchHits 对象传递给服务器。服务器反过来将其返回给我，并带有更新的值作为响应。如果我尝试使用 searchHits 对象，我仍然会得到无限循环

state: {
    visible: true,
    loading: false,
    search: {
        value: “”,
        searchHits: {....}, 
        highlight: false,
    }
}

let val = search.value
let hits = search.searchHits
useEffect( () => {

    axios.post(`/search=${state.search.value}`, {hits: hits}).then( resp => {
        …do something or ..do nothing
        state.setState( prevState => {
            return {
                …prevState,
                search: {... prevState.search, hits: resp.hit}
            }
        })
    })
}, [val, hits])

用例 1：我想搜索一个字符串，然后在得到结果时突出显示

例如

state: {
    visible: true,
    loading: false,
    search: {
        value: “”,
        highlight: false,
    }
}

useEffect( () => {

    axios.get(`/search=${state.search.value}`).then( resp => {
        …do something or ..do nothing
        state.setState( prevState => {
            return {
                …prevState,
                search: {... prevState.search, highlight: true}
            }
        })
    })
}, [state.search])

在 useEffect 中，我使用search.value. eslint 抱怨有依赖state.search，它不承认state.search.value. 即使你通过state.search.value它抱怨state.search

现在，如果您state.search作为依赖项传递，它将进入无限循环，因为在 api 调用之后，我们正在更新highlights搜索中的标志。

这将触发另一个状态更新和递归循环。

避免这种情况的一种方法是不要在状态中嵌套对象或将突出显示标志移到搜索之外，但我试图不走那条路线，因为我拥有的绝对依赖。我宁愿有一个状态称为搜索的对象。有什么办法可以更好地解决这个问题。如果我想保持我的状态对象如上所述我如何处理无限循环

Answer 1

可能只是一个 eslint 的东西错误。您通过说//do something并隐藏了他的代码收回了一些代码。您确定它与搜索对象没有任何关系吗？

另外，尝试在useEffect().

const searchValue = state.search.value; useEffect(()=>{// axios call here},[searchValue])

如果您的搜索值是一个对象，react 会进行浅层比较，并且可能不会给出想要的结果。在一组对象依赖项上重新渲染并不理想。提取变量。

React 对 useEffect 中指定的依赖进行浅比较

例如。，

const {searchParam1, searchParam2} = search.value;
useEffect(() => {
//logic goes here
}, [searchParam1, searchParam2]);

此外，您可以为eslint-plugin-react-hooks添加 dev 依赖项，以识别钩子的常见错误