如何在 useEffect 挂钩中正确地对 reactjs state object 属性进行功能更新

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 它会给我控制台上的错误警告：超出最大更新深度

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

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

Answer 1

这可能是理想的方法：

如果您在“setFormData”调用中只需要“formData”，也可以进行功能更新“setFormData(f =>...)”

基本上，您可以更改setFormData调用以使用当前 state 内部的任何内容，而不是直接依赖formData ：

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

出于所有意图和目的，它仍然是formData的相同值。 唯一的区别是，如果多个 state 更新在单个操作中排队，则此回调语法在批量更新中使用当前 state，而不是在渲染时显式 Z9ED39E2EA931586B6A985A6942EF573E。

对于这种特殊情况，它将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]);