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

Question

我实际上正在尝试使用 useState 和 useEffect Hook 来定位处于空状态的一些 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 has a missing dependency: 'state'. Either include it or remove the dependency array. You can also do a functional update 'setState(s => ...)' if you only need 'state' in the 'setState' call react-hooks/exhaustive-deps

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

精度:当然，这是一个非常简单的例子。在我的项目中，我想在 useEffect Hook 外部编写的函数中重用我的状态(标题+副标题)。

Answer 1

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

由于该参数是 useEffect 的本地参数(内部)，因此无需将其声明为依赖项。

useEffect(() => {

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

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

}, []);