Reactjs如何使用useEffect来处理useState的很多变化

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

我想避免的是...

useEffect(() => {
        dispatch({ type: "NAME_FIRST", nameFirst: nameFirst });
}, [nameFirst]);

useEffect(() => {
        dispatch({ type: "NAME_LAST", nameLast: nameLast });
}, [nameLast]);

useEffect(() => {
        dispatch({type: "NAME_EMAIL", nameEmail: nameEmail});
}, [nameEmail]);

useEffect(() => {
    dispatch({type: "NAME_PHONE", namePhone: namePhone});
}, [namePhone]);

因为看起来不是很干

Answer 1

第一种方法使用 else if 所以这意味着你只更新其中一个；也许你想更新不止一个？

不过，我其实更喜欢第二种方法；更容易阅读每个 useEffect 应该做什么

最后，您是否考虑过使用 redux hook useSelector 而不是 useState？除非你在更新状态时做一些额外的事情 useSelector 应该是你的最佳选择

Answer 2

您想在其中一个效果的依赖性发生变化时触发 useEffect。不是别人。最简单的方法是使用多个 useEffects。但是 if 和 else if 不正确并且不会起作用。

我想你想要这个，实际上正确的问题是：
React useEffect Fire Hook when only one of the effect's deps changes, but not the others

一些解决方案：

一个解决方案是将 prevState 与 nextState 进行比较，如果有变化，则启动它！

如何在 React Hooks useEffect 上比较旧值和新值？

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

Reactjs如何使用useEffect来处理useState的很多变化

Reactjs how to use useEffect to handle many changes to useState

reactjs

use-effect

react-functional-component

use-state