React.js如何使用useEffect处理useState的许多更改

问题描述

我的应用程序中有多个useState。我正在使用useEffect向我的减速器发送动作。为了提高效率和可读性，我不想将每个状态更改都使用单个useEffect，而是将所有状态更改放在单个useState中。如我所料，它似乎不起作用。使它起作用的正确语法是什么

useEffect

我想避免的是...

const [nameFirst,setNameFirst] = useState('');
const [nameLast,setNameLast] = useState('');
const [nameEmail,setNameEmail] = useState('');
const [namePhone,setNamePhone] = useState('');

useEffect(() => {
    if (nameFirst) {
        dispatch({ type: "NAME_FIRST",nameFirst: nameFirst });
    } else if (nameLast) {
        dispatch({ type: "NAME_LAST",nameLast: nameLast });
    } else if (nameEmail) {
        dispatch({type: "NAME_EMAIL",nameEmail: nameEmail});
    } else if (namePhone) {
        dispatch({type: "NAME_PHONE",namePhone: namePhone});
    }
},[nameFirst,nameLast,nameEmail,namePhone]);

因为它看起来不太干

解决方法

您要触发useEffect，如果效果的依赖项之一已更改。没有其他人。最简单的方法是使用多个useEffects。但if和else if不正确，将无法使用。

我认为您想要这个＆正确的问题是：
React useEffect Fire Hook when only one of the effect's deps changes,but not the others

一些解决方案：

• React useEffect Hook when only one of the effect's deps changes,but not the others

一种解决方案是将prevState与nextState进行比较，如果有更改，请执行该操作！

• How to compare oldValues and newValues on React Hooks useEffect?

,

第一种方法使用else if，这意味着您仅更新其中一个。也许您希望更新多个？

尽管如此，我实际上更喜欢第二种方法。阅读每个useEffect应该做什么更容易

最后，您是否考虑过使用Redux钩子useSelector而不是useState？ 除非您在更新状态useSelector时做其他事情，否则应该是您的最佳选择

,

这段代码怎么样？

const [data,setData] = useState({
    nameFirst: "",nameLast: "",nameEmail: "",namePhone: "",});

useEffect(() => {
    setData(() => {
      data.nameFirst && dispatch({ type: "NAME_FIRST",nameFirst: nameFirst });
      data.nameLast && dispatch({ type: "NAME_LAST",nameLast: nameLast });
      data.nameEmail && dispatch({type: "NAME_EMAIL",nameEmail: nameEmail};
      data.namePhone && dispatch({type: "NAME_PHONE",namePhone: namePhone});
      return data;
    })
},[data]);