与类不同，React没有回调作为setter上的第二个参数。因此，您可以在setter回调中调用处理程序，尽管从技术上讲，状态还没有改变：
我有一个简单的计数器子组件。
import React, {useState} from 'react'
import classes from './counter.module.css'
const Counter = (props) => {
const [number, setNumber] = useState(0);
const decrementHandler = () => {
setNumber((prevState) => {
if(prevState === 0) {
return 0
}
return prevState - 1;
})
props.onCounterChange(number);
}
const incrementHandler = () => {
setNumber((prevState) => {
return prevState + 1;
})
props.onCounterChange(number);
}
return (
<>
<div className={`${classes['counter-wrap']}`}>
<button className={`${classes['counter-button']} ${classes['decrement']}`} onClick={decrementHandler}>-</button>
<span className={classes['number']}>{number}</span>
<button className={`${classes['counter-button']} ${classes['increment']}`} onClick={incrementHandler}>+</button>
</div>
</>
);
});
export default Counter;
我想使用props.onCounterChange()函数将计数器值number传递给父组件。由于State是异步的，因此我不会收到父级的最新状态值。一旦状态发生变化，如何将计数器值传递给父组件？
const decrementHandler = () => {
setNumber((prevState) => {
if (prevState === 0) {
return 0
}
props.onCounterChange(prevState - 1);
return prevState - 1;
})
}
const incrementHandler = () => {
setNumber((prevState) => {
props.onCounterChange(prevState + 1);
return prevState + 1;
})
}
或者，您可以在状态更改后使用useEffect调用它，请注意，当组件也使用0初始化时，会调用它：
useEffect(() => {
props.onCounterChange(number);
}, [number])
小心不要得到过时的引用，但要确保onCounterChange也是常量(useCallback(:
useEffect(() => {
props.onCounterChange(number);
}, [props.onCounterChange, number])
或者通过隧道传入回调，这很难看，但不取决于用户创建对onCounterChange的恒定引用(箭头函数每次都是新的(：
const onCounterChangeRef = useRef(props.onCounterChange);
onCounterChangeRef.current = props.onCounterChange
useEffect(() => {
onCounterChangeRef.current(number);
}, [number])