相当于 setstate 的钩子状态回调答案

【问题标题】：Equivalent of hooks state callback like setstate相当于 setstate 的钩子状态回调
【发布时间】：2021-10-24 00:35:42
【问题描述】：

在 React 中，有使用 setState 更新类组件中状态的功能。它还有一个回调函数，一旦状态更新就会执行。

我想用钩子做类似的事情。我的要求是：一旦第一个状态被更新，那么我想在功能组件的点击处理程序中更新其他状态。我们该怎么做？

setFilterBy("read or unread");
setEmailList(list);

我已经看到了以下解决方案，但这对我不起作用，因为他们正在 useEffect 中执行某些操作，而我想在点击处理程序中执行此操作：How to use `setState` callback on react hooks

【问题讨论】：

“我见过这个，但这对我不起作用，因为他们在 useEffect 中做一些事情，而我想在点击处理程序中做。” 你能给我们一个具体的吗可以使用的示例？
这两行代码（仅通过命名约定）显示为filterBy 和emailList 设置状态值。这在什么情况下不能按预期工作？你有一个你试图解决的问题的例子吗？
你可以看看这个问题stackoverflow.com/questions/56247433/…
这里是例子codesandbox.io/s/loving-jennings-xphsd?file=/src/App.js
@NSharma - 请将您的示例放入您的问题中，而不仅仅是链接。三个原因：人们不应该去场外帮助你；某些网站被某些用户屏蔽；和链接腐烂，使问题及其答案对未来的人们毫无用处。您可以将其设为 Stack Snippet（[<>] 工具栏按钮）。 Stack Snippets 支持 React，包括 JSX； here's how to do one.

标签： javascript reactjs

【解决方案1】：

要得到你想要的，你需要使用useEffect，所以基本上你可以有这样的东西：

const [emailList, setEmailList] = useState([]);

const whateverYouDoToCallTheStateUpdate = () => {
  setEmailList(['new user']);
}

useEffect(() => {
   console.log('the email changed, the new list is', emailList);
}, [emailList]);

【讨论】：

【解决方案2】：

我已经看到了，但这对我不起作用，因为他们正在 useEffect 中做一些事情，而我想在点击处理程序中做。

这里有两个答案：

您可以在点击处理程序中使用您调用useState 的数据，如果您有其他需要做的事情，您不必等待状态设置。如果这些进一步的事情还涉及设置状态，则这样做的好处是状态更改可能会被合并，因此您的组件不会不必要地重新渲染（如果您在 setState 回调中进行了进一步的状态更改，可能会出现这种情况）。这就是您在问题代码中所做的：
```
setFilterBy("read or unread");
setEmailList(list);
```
这很好，没有错。它不会导致两次渲染，在可能的情况下合并状态更改（并且可以像这样一个接一个地使用两个 setter）。

更一般地说：
```
// In the click handler:
const theData = /*...figure out the data...*/;
setTheData(theData);
// ...do more things with `theData`...
```
如果您确实想在执行操作之前等待状态设置，您可以根据存储在 ref 或useMemo 回调（如果只是出于性能原因；没有语义保证），或者（如您所见）在 useEffect 或 useLayoutEffect 回调中。

【讨论】：

这是codesandbox.io/s/loving-jennings-xphsd?file=/src/App.js 的例子，你能看到吗？在 L34 // 这里我想调用 setFilterBy(null) 然后设置其他状态。问题是当您运行应用程序时点击电子邮件然后进入已读电子邮件它可以工作然后返回未读电子邮件然后点击邮件直接将其移动到已读列表中，因为过滤器不为空。
有什么建议吗？？