简单的计数器不会停止使用useEffect钩子在功能组件内部递增

Question

我试图在功能组件的useEffect Hook中使用rxjs。

我相信useEffect可以像componentDidMount和componentDidUpdate一样使用。

 const Counter = () => {
  const [state, setState] = useState({counter: 0});
  useEffect(() => {
    subscriber.subscribe((value) => {
        let { counter } = state;
        counter += value;
        setState({ counter });
    });
  });
  return (
    <div>
      <span>Counter: {state.counter}</span>
      <Crementer />
    </div>
  );

订阅者是一个简单的 rxjs 主题

const subscriber = new BehaviorSubject(0);

还有一个组件可以增加/减少计数器

const Crementer = () => {
  return(
    <>
      <button onClick={() => subscriber.next(1)}>+</button>
      <button onClick={() => subscriber.next(-1)}>-</button>
    </>
  )
};

(

我也尝试了counterService.send(1(

问题是一旦我单击 + 或 - 计数器就会连续递增或递减。

您可以在此处看到行为：https://stackblitz.com/edit/react-9auz4d

也许是因为useEffect也在更新时运行？它可能会在带有组件的类组件中工作DidMount(( ？

Answer 1

每次

更新都会调用钩子：https://reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update

因此，您可以将从调用subscribe返回的订阅存储，然后将其保存在另一个useState中。在每次效果调用时，您只需检查它是否已设置。顺便说一句，您还应该从此效果返回一个拆解函数，以便您也需要订阅。

或者最终你可以使用第二个参数来useEffect只运行一次(如何使用 React useEffect 调用加载函数一次(：

useEffect(() => {
  const subscription = observable.subscribe((value) => {
    let { counter } = state;
    counter += value;
    setState({ counter });
  });
  return () => subscription.unsubscribe();
}, []);