React Hooks：将对象作为 useEffect 中的依赖项处理

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 进行 API 调用。 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 依赖项，以识别 hooks 的常见错误