Question

我正尝试致电useEffect()，但仅在users的状态上升时。当前，无论计数是增加还是减少，都会对函数的任何更改进行调用。我知道我决定何时在括号中调用useEffect()，但是我不确定如何使它像users++那样说。

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

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

Answer 1

没有特殊的方法可以做到这一点。它总是在寻找变化，无论变化是什么。

在您的情况下，您可以使用函数存储用户的先前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])

Answer 2

就像其他人提到的那样，您需要存储用户计数的旧值，以便将其与当前值进行比较。 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>;
};

Answer 3

您可以在组件中保留诸如[userIncreased, setUserIncreased]这样的另一种状态，只有在users状态增加时，状态才会改变。因此，无论在何处调用setUsers函数，都应检查users是增加还是减少。如果增加，请致电setUserIncreased至userIncreased + 1。然后，您可以在userIncreased挂钩中的依赖项数组中传递useEffect。（此解决方案将导致两次渲染，因为如果users状态增加一次，您将更新两次状态。）

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

仅在状态增加时才调用useEffect（）

3 个答案: