是否有一个 React 钩子功能具有与将回调作为第二个参数传递给 setState 相同的功能?



使用钩子,我想仅在特定调用更新状态后执行函数。例如,我想实现与此相同的功能(假设我已经实例化了这段状态(。

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}`));
...
}

相关内容

  • 没有找到相关文章

最新更新