'React Hook useEffect has missing dependencies' 反应中

Question

我在这个网站上看到过类似的问题，但我没有正确理解它发生的原因。

我面临的是，我正在尝试使用 React 制作待办事项列表。这是我第一次使用 React 构建项目，所以我还在学习中。

所以，我想做的是，当用户点击一个按钮时，一个模式打开，然后它收集标题和待办事项的详细信息，用户点击保存，模式关闭，然后一张卡片显示该待办事项。

代码：

let firstRender = useRef(true);
useEffect(()=> {
    if(firstRender.current) {
        firstRender.current = false;
    }
    else{
        if(!modalState) {
            if(!modalCancel) {
                let Title = todoTitle;
                let Detail = todoDetail;
                setTodo([...todo, {
                    title: Title.toUpperCase(),
                    detail: Detail
                }])
            }

        }
        
    }
}, [modalState, modalCancel])

modalState 只是一个状态，表示模态是打开还是关闭，modalCancel 是一个状态，表示模态是保存还是取消。我还有一些其他状态，它们负责从模态中获取待办事项的详细信息和标题，以及一个跟踪所有待办事项的状态。

这工作正常，但在终端中显示以下警告：

React Hook useEffect has missing dependencies: 'todo', 'todoDetail', and 'todoTitle'. Either include them or remove the dependency array. You can also do a functional update 'setTodo(t => ...)' if you only need 'todo' in the 'setTodo' call  react-hooks/exhaustive-deps

如果我添加所有状态，我的应用程序将无法运行，并且我不想删除这两个依赖项，因为我想每次都触发 re-render（页面加载时的第一个除外）当模式关闭时。任何人都可以帮我吗？如果需要，我可以展示所有状态是如何写的。

Answer 1

您的 useEffect 将在其依赖项发生变化时 re-run。如果您不将待办事项作为依赖项，当待办事项更改时，它不会采用新的待办事项值并仍然使用旧值（当它 re-run 在您的情况下，当 modalState 或 modalClose 更改时）。

例如：当您 modalState 时，您的待办事项是 [{title: 'one', detail: 'number one'}] 然后你执行一些其他改变待办事项状态值的函数（例如：从服务器获取数据），新的待办事项现在是：

[
  {title: 'one', detail: 'number one'},
  {title: 'two', detail: 'number two'}
]

但是你的 modalState 没有改变！这意味着 state todo 在你的 useEffect 函数中的值没有改变！ ([{title: 'one', detail: 'number one'}])

然后你在 useEffect 中用 {title: "three", detail: "number three"} 调用 setTodo 会得到：

[
  {title: 'one', detail: 'number one'},
  {title: 'three', detail: 'number three'}
]

而不是：

[
  {title: 'one', detail: 'number one'},
  {title: 'two', detail: 'number two'},
  {title: 'three', detail: 'number three'}
]

如果你把todo作为一个依赖，在useEffect里面调用setTodo！会造成无限循环。

我的解决方案：

当尝试使用 useState 挂钩更新状态时，您可以传递一个回调而不仅仅是一个值！该回调有一个 prop 是 todo 的先前值。所以现在你没有在你的 useEffect 中使用 todo 状态，但你仍然有 todo 的价值。通过“不在 useEffect 中使用状态”，您不必将 todo 作为依赖项传递。

let firstRender = useRef(true);
useEffect(()=> {
    if(firstRender.current) {
        firstRender.current = false;
    }
    else{
        if(!modalState) {
            if(!modalCancel) {
                let Title = todoTitle;
                let Detail = todoDetail;
                setTodo(prevTodo => [...prevTodo, {
                    title: Title.toUpperCase(),
                    detail: Detail
                }])
            }

        }
        
    }
}, [modalState, modalCancel, todoTitle, todoDetail])

希望对您有所帮助。

'React Hook useEffect has missing dependencies' 反应中

'React Hook useEffect has missing dependencies' in react

javascript

node.js

reactjs

react-hooks

use-effect

如果你把todo作为一个依赖，在useEffect里面调用setTodo！会造成无限循环。

我的解决方案：