React Hooks:将对象作为 useEffects 中的依赖项处理 [英] React Hooks: Handling Objects as dependency in useEffects

问题描述

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

UPDATE: Yes for use case 1, if I extract search.value outside the useEffect and use it as a dependency it works.

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

But I have an updated Use case below

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

Use Case 2: I want to pass a searchHits Object to the server. The server in turn return it back to me with an updated value in response. If I try using the searchHits Object I still get the infinite loop

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:我想搜索一个字符串，然后在得到结果时突出显示

Use Case 1: I want to search for a string and then highlight when I get results

例如

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 进行 API 调用.eslint 抱怨依赖于 state.search ，它无法识别 state.search.value.即使你通过了 state.search.value 它也会抱怨 state.search

In useEffect I make the API call using search.value. eslint complains that there is a dependency on state.search , it does not recognize state.search.value. Even if you pass state.search.value it complains about state.search

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

Now if you pass state.search as dependecy it goes in an infinite loop because after the api call we are updating the highlights flag inside search.

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

Which will trigger another state update and a recursive loop.

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

One way to avoid this is to not have nested Objects in state or move the highlights flag outside search, but I am trying to not go that route give the sheer dependecies I have. I would rather have an Object in state called search the way it is. Is there any way to better approach this. If I want to keep my state Object as above how do I handle the infinite loop

推荐答案

可能只是 eslint 的一个 bug.您通过说 //do something 收回了一些代码并隐藏了他的代码.你确定它和搜索对象没有任何关系?

Just a eslint stuff bug may be. You have retracted some code by saying //do something and have hidden he code. Are you sure that it doesn't have anything to do with search object?

另外，尝试在useEffect()之前提取变量.

Also, try to extract the variable out before useEffect().

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

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

If your search value is an object, react does shallow comparison and it might not give desired result. Re-rendering on a set of object dependencies isn't ideal. Extract the variables.

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

React does shallow comparison of dependencies specified in useEffect

例如，

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

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

Additionally, you can add dev dependency for eslint-plugin-react-hooks, to identify common errors with hooks

这篇关于React Hooks:将对象作为 useEffects 中的依赖项处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！