Question

我正在将我使用的 setStates 从基于类的组件更新为功能组件。我有几个用例，其中有一个闭包。代码是

this.setState(

  ({ notifications }) => ({

    notifications: [...notifications, notification],

  }),

  () =>

    timeout !== undefined && window.setTimeout(closeNotification, timeout)

);

我如何使用 useState 钩子来更新它。我假设 useState 不返回承诺，所以我不能使用 .then。如果是这样，更新此功能的最佳方法是什么？

Answer 1

也许是这样？

const [notifications, setNotifications] = useState([]);

const doSomething = () => {
  setNotifications([ /* ... */ ]);
}

useEffect(() => {
  let timer;
  if(timeout !== undefined) {
    timer = setTimeout(closeNotification, timeout);
  }

  return () => clearTimeout(timer)
}, [notifications]);

Answer 2

您可以使用 useState 和 useEffect 钩子来实现相同的结果，如下所示：

const [notifications, setNotifications] = useState([]);

useEffect(() => {

    // Close Notifications Here

}, [notifications]);

// To update the state use the setNotifications function like so
setNotifications(prevState => [...prevState, newNotification]);

每当您更新通知时，useEffect 挂钩都会运行。

反应更新 setState 回调到 useState 钩子

2 个答案: