如何在控制台中使用useEffect钩子在没有错误/警告的情况下将DOM元素添加到我的状态？

Question

实际上，我正试图用useState和useEffect钩子将一些处于空状态的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缺少依赖项：“状态”。包括它或删除依赖项数组。您还可以执行功能更新“设置状态”=

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


预言：当然，这是一个非常简单的例子。在我的项目中，我想重新使用我的状态（标题副标题）在使用效果钩子之外编写的函数中。




Answer 1

//can be anything, a string, undefined, a boolean
const [title, setTitle] = ("");
const [subtitle, setSubtitle] = ("");

//when the component is (re)rendered, this will be called.
useEffect(() => {

},[])
//"keeping track" of anything in the array, when they are updated, useEffect is executed

然后在组件中，您可以调用setSubtitle（“要用其更新的值”）

Answer 2

使用具有当前状态作为参数的setState（）回调版本，可以避免将state放入依赖项列表中。

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

useEffect(() => {

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

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

}, []);