我实际上正在尝试使用 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 外部编写的函数中重用我的状态(标题+副标题)。
最佳答案
通过使用将当前状态作为参数的 setState()
回调版本,您可以避免将 state
放入依赖项列表中。
由于该参数是 useEffect 的本地参数(内部),因此无需将其声明为依赖项。
useEffect(() => {
const myNewTitle = ["Hello", "World"];
const myNewSubtitle = ["What's", "up?"];
setState(oldState => {
return {...oldState, title: myNewTitle, subtitle: myNewSubtitle};
});
}, []);
关于javascript - 如何使用 useEffect Hook 将 DOM 元素添加到我的状态,而不会在控制台中出现错误/警告?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60510331/