Question

我的应用程序中有多个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]);

因为它看起来不太干

Answer 1

您要触发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?

Answer 2

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

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

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

Answer 3

这段代码怎么样？

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]);

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

3 个答案: