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

【问题标题】：Reactjs how to use useEffect to handle many changes to useStateReactjs如何使用useEffect来处理useState的很多变化
【发布时间】：2020-12-01 03:35:47
【问题描述】：

我的应用中有许多 useStates。我正在使用useEffect 向我的减速器发送一个动作。我不想对useState 的每次更改使用单个useEffect，而是为了提高效率和可读性，将所有状态更改放在单个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]);

因为它看起来不是很干燥

【问题讨论】：

我其实更喜欢第二种方法；更容易阅读每个useEffect 应该做什么
你是否考虑过使用 redux hook useSelector 而不是 useState？
@LuisFilipe 我没有考虑 useSelector 钩子。我使用的是 contextAPI，而不是 redux，如果这会改变你的评论
那么，dispatch 来自哪里？它是 contextApi 而不是 redux？
@LuisFilipe 正确，来自上下文 api const dispatch = useContext(DispatchContext);

标签： reactjs use-effect use-state react-functional-component

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果效果的依赖项之一发生更改，您想触发 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?

【讨论】：

【解决方案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]);

【讨论】：