为什么状态总是为 0，即使在使用 useCallback 之后

Question

我希望它应该是一个计时器。 useCallback 会在时间改变后刷新，所以第二次时间为1， 但仍然是 0

我尝试使用 useCallback 但没有用

import React, { useState, useEffect, useCallback } from 'react';
import { render } from 'react-dom';
import './style.css';

import {interval} from 'rxjs'
import { take } from 'rxjs/operators';

const inter$ = interval(1000);

function App(){
  const [time, setTime] = useState(0);
  const callback = useCallback(()=> {
      setTime(time+1);
      console.log('hella');
    }, [time])

  useEffect(()=>{
    console.log('hello')
    inter$.subscribe(callback)

  }, [])

  return <div>{time}</div>
}


render(<App />, document.getElementById('root'));

总是显示 1

这是code

Answer 1

在useEffect 内部，回调不会改变，因为它不是依赖项。因此，订阅回调中的时间始终为 0。

Rx.js:
setTime 调用的工作解决方案基于回调函数内部的 prevState。

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import "./style.css";

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const inter$ = interval(1000);

function App() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    console.log("hello");
    inter$.subscribe(() => {
      setTime(prevTime => prevTime + 1);
      console.log("hella");
    });
  }, []);

  return <div>{time}</div>;
}

render(<App />, document.getElementById("root"));

Answer 2

改变setTime(time+1);设置时间（时间=>时间+1）； 这是完整的代码：

import React, { useState, useEffect, useCallback } from 'react';
import { render } from 'react-dom';
import './style.css';

import {interval} from 'rxjs'
import { take } from 'rxjs/operators';

const inter$ = interval(1000);

function App(){
  const [time, setTime] = useState(0);
  const callback = useCallback(()=> {
      setTime(time=>time+1);
      console.log('hella');
    }, [time])

  useEffect(()=>{
    console.log('hello')
    inter$.subscribe(callback)

  }, [])

  return <div>{time}</div>
}



render(<App />, document.getElementById('root'));

stackblitz