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

Question

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

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

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

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标志。

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

避免这种情况的一种方法是在 state 中没有嵌套对象或将突出显示标志移到搜索之外，但我试图不让 go 这条路线给我带来纯粹的依赖。 我宁愿在 state 中有一个 Object 称为搜索。 有没有办法更好地解决这个问题。 如果我想像上面一样保留我的 state Object 我该如何处理无限循环

Answer 1

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

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

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

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

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

例如。，

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

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