Reactjs 仅当状态增加时调用useEffect（）

我试图调用useEffect，但只有在用户状态上升时才调用。当前，无论计数是增加还是减少，只要对计数进行任何更改，都会调用该函数。我知道我决定何时在括号中调用useEffect，但我不确定如何让它按照用户++的思路说些什么

---

没有什么特别的方法可以做到这一点。它总是在寻找改变，不管是什么样的改变

在您的例子中，您可以使用一个函数来存储用户的前一个Ref，并使用一个if语句来检查它。像这样：

const [users, setUsers] = useState('');

const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const prevUsers = usePrevious(users);

useEffect(() => {
  if(prevUsers <= users){
    // Your logic here
  }
}, [users])

---

与前面提到的其他值一样，您需要存储users count的旧值，以便将其与当前值进行比较。React.useRef是最好的方法。当你这么做的时候，你最好创建一个自定义的usePrevious钩子，你可以在其他地方重用它。以下是完整的解决方案：

const usePrevious = value => {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

export const MyComponent = props => {
  const [userCount, setUserCount] = React.useState(0);
  const previousUserCount = usePrevious(userCount);

  React.useEffect(() => {
    if (previousUserCount <= userCount) {
      console.log('a new user has joined');
    }
  }, [previousUserCount, userCount]);

  return <div>Hello</div>;
};

---

您可以在组件中保存另一段状态，如[UserIncremented，SetUserIncremented]，该状态仅在用户段状态增加时才会更改。因此，无论在何处调用setUsers函数，都要检查用户是在增加还是在减少。如果增加，则调用setUserEnhanced到userEnhanced+1。然后，您可以在useEffect钩子中传递依赖项数组中的userEnhanced。此解决方案将导致双重渲染，因为如果用户的状态增加，您将更新两次状态

  const [users, setUsers] = useState(0);
  const [userIncreased, setUserIncreased] = useState(0);

  useEffect(() => {
    console.log("a new user has joined");
  }, [userIncreased]);

  const handleButton = userNumber => {
    if (userNumber > users) {
      setUsers(userNumber);
      setUserIncreased(userIncreased + 1);
    } else if (userNumber < users) {
      setUsers(userNumber);
    }
  };
}

  const [users, setUsers] = useState(0);
  const [userIncreased, setUserIncreased] = useState(0);

  useEffect(() => {
    console.log("a new user has joined");
  }, [userIncreased]);

  const handleButton = userNumber => {
    if (userNumber > users) {
      setUsers(userNumber);
      setUserIncreased(userIncreased + 1);
    } else if (userNumber < users) {
      setUsers(userNumber);
    }
  };
}