使用钩子,我想仅在特定调用更新状态后执行函数。例如,我想实现与此相同的功能(假设我已经实例化了这段状态(。
setState({name: Joe}, () => console.log('hi'));
我不希望每次名称更改时都记录"hi",我只想在执行此特定 setState 调用后记录"hi"。
这
const [name, setName] = useState('');
useEffect(() => {
console.log('hi');
}, [name]);
setName('Joe');
setName('Bob'); // only log 'hi' after this one!
setName('Joe');
setName('Bob');
对我的目的不起作用,因为我不想每次更改名称时都记录"嗨"。setName 调用中的值无关紧要。控制台.log 只有在执行此特定 setName 调用后才能执行。
更新:我想太多了。我之所以问这个问题,是因为我有一段称为"mode"的状态,它通过 switch 语句确定一些条件渲染:
switch(mode) {
case foo: return <Foo />
case bar: return <Bar />
}
我只想在模式是某个值时触发一些逻辑(也就是某个组件将被渲染(。我只是将此逻辑向下移动到较低级别的组件中并使用
React.useEffect(() => {
someLogic();
}, []);
为了仅在组件渲染上触发此逻辑。
来自 useState(( 和 useReducer(( 钩子的状态更新不支持第二个回调参数。要在渲染后执行副作用,请使用 useEffect(( 在组件主体中声明它。
只是在这里吐槽
const useStateWithCallback = val => {
const callback = useRef();
const [state,setState] = useState(val);
useEffect(() => {
callback.current && callback.current(state);
callback.current = null;
},[callback,state]);
return [
state,
useCallback((arg,cb) => {
callback.current = cb;
return setState(arg);
},[callback,setState])) // these are safe to omit, right?
]
}
编辑:不要太冗长,但用法:
import { useStateWithCallback } from './useStateWithCallback';
const MyCmp = () => {
const [name,setName] = useStateWithCallback('');
...
setName('joe',state => console.log(`Hi ${state}`));
...
}