在功能组件中使用回调来反应 setState

Question

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

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

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

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

据我所知，您无法将回调传递给此挂钩的 setState 函数。当我使用 useEffect 挂钩时 - 它以无限循环结束：

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

Answer 1

回调功能在 react-hooks 中不可用，但您可以使用 useEffect 和 useRef.

编写一个简单的绕过

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])

在功能组件中使用回调来反应 setState

React setState with callback in functional components

reactjs

react-hooks

react-functional-component

use-state