gpt4 book ai didi

reactjs - 在功能组件中使用回调来 react setState

转载 作者:行者123 更新时间:2023-12-05 03:53:07 27 4
gpt4 key购买 nike

我在类组件中写了一个非常简单的例子:

    setErrorMessage(msg) {
this.setState({error_message: msg}, () => {
setTimeout(() => {
this.setState({error_message: ''})
}, 5000);
});
}

所以在这里我调用了 setState() 方法并给它一个回调作为第二个参数。

我想知道我是否可以使用 useState Hook 在功能组件中执行此操作。

据我所知,您不能将回调传递给此 Hook 的 setState 函数。当我使用 useEffect 钩子(Hook)时 - 它以无限循环结束:

enter image description here

所以我猜 - 这个功能没有包含在功能组件中?

最佳答案

回调功能在 react-hooks 中不可用,但您可以使用 useEffectuseRef 编写一个简单的绕过。

const [errorMessage, setErrorMessage] = useState('')
const isChanged = useRef(false);
useEffect(() => {
if(errorMessage) { // Add an existential condition so that useEffect doesn't run for empty message on first rendering
setTimeout(() => {
setErrorMessage('');
}, 5000);
}

}, [isChanged.current]); // Now the mutation will not run unless a re-render happens but setErrorMessage does create a re-render

const addErrorMessage = (msg) => {
setErrorMessage(msg);
isChanged.current = !isChanged.current; // intentionally trigger a change
}

上面的例子考虑了这样一个事实,即您可能也想从其他地方设置 errorMessage 而您不想重置它。但是,如果您想在每次设置 ErrorMessage 时都重置消息,您可以简单地编写一个普通的 useEffect,例如

useEffect(() => {
if(errorMessage !== ""){ // This check is very important, without it there will be an infinite loop
setTimeout(() => {
setErrorMessage('');
}, 5000);
}

}, [errorMessage])

关于reactjs - 在功能组件中使用回调来 react setState,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61840817/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com