为什么状态总是为 0,即使在使用 useCallback 之后
why state always be 0, even after using useCallback
我想它应该是一个计时器。
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
在 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"));
更改设置时间(时间+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'));
我想它应该是一个计时器。 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
在 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"));
更改设置时间(时间+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'));