我们可以在使用该状态的 API 调用之前更改状态吗？反应答案

【问题标题】：Can we change state before making an API call which uses that state? React我们可以在使用该状态的 API 调用之前更改状态吗？反应
【发布时间】：2021-12-26 07:05:35
【问题描述】：

 useEffect(() => {
    resetState();
    if (page === 'ADMISSION') {
      fetchAdmissionKitPosts();
    } else if (page === 'WEEKLY') {
      fetchWeeklyKitPosts();
    } else if (page === 'FESTIVAL') {
      fetchFestivalKitPosts();
    }
  }, [page]);

所以我想根据页面变量进行不同的 API 调用。在拨打这些电话之前，我必须重置状态。但是在拨打电话时，我得到了以前的状态。我开始知道 react 中的 setState 本质上是异步的，所以我认为这就是我在 API 调用函数中获取先前状态的原因。

所以我的问题是，我怎样才能使这些 API 调用仅在状态重置后运行？

我知道我可以通过 setState 函数在基于类的组件中使用回调函数。但我想保持这个组件的功能。

【问题讨论】：

尝试使resetState函数异步，调用函数时使用await。
我试过了，但它不起作用。尽管 react 中的 setState 函数是异步的，但 await 不适用于它们，因为它们是由 react 处理的。 ``` const resetState = async () => { await setMarketingPosts([]);等待 setNextPageToken(''); }; ``` ``` useEffect(() => { (async function() { await resetState(); fetchData(); })(); }, [page]); ```这是我试过的。
使用 setState 中的回调，如 setState(()=>) 来处理异步操作。 reactjs.org/docs/react-component.html#setstate
@Jerry，我没有使用基于类的组件
@Duoro 嘿，我的意思是您可以将 setState 替换为 setPosts 或 setPages 等等。仔细阅读技术文档，有时您可以在那里找到答案

标签： javascript reactjs asynchronous

【解决方案1】：

您可以通过useEffect在功能组件中实现setState回调。如果我没看错，您使用的是两个状态变量 page 和 posts，如果是这种情况，您应该使用两个 useEffect 方法像这样：

useEffect(() => {
   if(page !== ''){
    setMarketingPosts([])
   } 
  }, [page]);

  useEffect(() => {
    if (page === 'ADMISSION') {
      fetchAdmissionKitPosts();
    } else if (page === 'WEEKLY') {
      fetchWeeklyKitPosts();
    } else if (page === 'FESTIVAL') {
      fetchFestivalKitPosts();
    }
    setNextPageToken('')
  }, [post]);

【讨论】：