Question

我在依赖项中拆分了对象，但是现在eslint正在显示警告，提示缺少依赖项。

const MyComp = () => {
    const data = {name:'ss', age: 1}

    useEffect(() => {

    }, [data.name, data.age])

    return <div>content</div>
}

我不能放置整个data以避免不必要的重新呈现。

Answer 1

听起来您在挂钩中使用了data。您已经说过不能将data本身添加为依赖项，因为它会导致太多渲染。这意味着您需要将data拆分：

const MyComp = () => {
    const name ='ss'
    const age = 1

    useEffect(() => {
        // Use `name` and `age` here
    }, [name, age])

    return <div>content</div>
}

使用钩子时，通常要比使用对象状态成员更喜欢单独的状态成员（我假设data是状态成员，而不是常量）。

或者用另一种方式，如Michael H pointed out：

const MyComp = () => {
    const data = {name: 'ss', age: 1}

    const {name, age} = data // <=========================
    useEffect(() => {
        // Use `name` and `age` (not `data`) here
    }, [name, age])          // <=========================

    return <div>content</div>
}

React Hook useEffect缺少对象的依赖关系

1 个答案: