时间戳

首页 > 解决方案 > 如何使用 useEffect 钩子将 DOM 元素添加到我的状态，而不会在控制台中出现错误/警告？

javascript - 如何使用 useEffect 钩子将 DOM 元素添加到我的状态，而不会在控制台中出现错误/警告？

问题描述

我实际上是在尝试使用useState和useEffect hooks来定位处于空状态的一些 DOM 元素。
完全没问题，我觉得我做得对。这是我的实际代码：

const [state, setState] = useState({
    title: [],
    subtitle: []
});

useEffect(() => {
    const myNewTitle = ["Hello", "World"];
    const myNewSubtitle = ["What's", "up?"];

    setState({...state, title: myNewTitle, subtitle: myNewSubtitle})
    console.log(state)
}, [state]);

在这里，我的控制台显示了一个无限循环。
我试图写一个空数组[]，但我的状态的新值没有像我想的那样显示在控制台中。
所以，我写了这个： [state.title[0], state.subtitle[0]]);

我不知道我的代码是否正确。控制台显示我想要的，我的状态的新值。
但是我在控制台中收到了这个警告：

React Hook useEffect 缺少依赖项：'state'。包括它或删除依赖数组。如果您只需要在“setState”调用 react-hooks/exhaustive-deps 中需要“状态”，您也可以进行功能更新“setState(s => ...)”

实际上，我不知道如何解决这个问题。有人能帮助我吗 ？

精度：当然，这是一个非常简单的例子。在我的项目中，我想在 useEffect hook 之外编写的函数中重新使用我的状态（标题+副标题）。

标签： javascriptreactjsreact-hooks

解决方案

您可以通过使用将当前状态作为参数 state的回调版本来避免必须放入依赖项列表。setState()

由于该参数是本地（内部）useEffect，因此没有必要将其声明为依赖项。

useEffect(() => {

  const myNewTitle = ["Hello", "World"];
  const myNewSubtitle = ["What's", "up?"];

  setState(oldState => {
    return {...oldState, title: myNewTitle, subtitle: myNewSubtitle};
  });

}, []);

推荐阅读