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的东西错误.您通过说出//做某事撤消了一些代码，并隐藏了他的代码.您确定与搜索对象无关吗?

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依赖项，以使用钩子识别常见错误

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

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