如何在useEffect钩子内正确地对reactjs状态对象属性进行功能更新

Question

下面给出了我的初始化代码

const userData = useSelector(state => state.userData); // Obtain from redux state
const [formData, setFormData]    = useState({
userId : '',
name   : '',
email  : ''
});

我想在useEffect钩子内更新formData的userId，但我在终端中收到了以下警告

React Hook useEffect缺少依赖项："formData"。请将其包括在内或删除依赖项数组。如果您只需要"setFormData"调用中的"formData"，您也可以执行功能更新"setFormData(f=>…(">

下面给出了我的useEffect代码。

useEffect(() => {
if(userData.userId !== ""){
setFormData({...formData,userId:userData.userId})
}
}, [userData]);

如果我添加依赖项formData以使用效果它会在控制台上给我错误警告：最大更新深度超过

useEffect(() => {
if(userData.userId !== ""){
setFormData({...formData,userId:userData.userId})
}
}, [userData,formData]);

请让我知道一个正确的解决方案，提前感谢

Answer 1

这可能是理想的方法：

如果您只需要"setFormData"调用中的"formData"，您也可以执行功能更新"setFormData(f=>…(">

基本上，您可以更改setFormData调用以在内部使用当前状态，而不是直接依赖于formData：

useEffect(() => {
if(userData.userId !== ""){
setFormData(f => ({ ...f, userId: userData.userId }))
}
}, [userData]);

就所有意图和目的而言，它仍然是formData的相同值。唯一的区别是，如果在一个操作中对多个状态更新进行排队，则此回调语法将使用更新批中的当前状态，而不是渲染时的显式状态。

对于这种特殊情况，它将删除作为依赖项的formData变量。(尽管它可能希望您将setFormData添加到依赖数组中，这不会影响任何内容。(

Answer 2

只需添加// eslint-disable-next-line react-hooks/exhaustive-deps即可修复第一个警告。

useEffect(() => {
if(userData.userId !== ""){
setFormData({...formData,userId:userData.userId})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userData]);