為什么在反應中執行狀態更改需要兩次點擊？

Question

我真的很難等待狀態更改。 我正在使用反應鈎子和上下文。

基本上，我有一個自定義下拉列表，這里沒有使用表單元素。 單擊時，它將運行一個函數來更改兩個參數的狀態：

// IdeaFilters.js
const organizationContext = useOrganization();
const { organization, filterIdeas, ideas, loading } = organizationContext;

const [filter, setFilter] = useState({
    statusId: "",
    orderBy: "voteCount"
  });

  // Build the parameters object to send to filterIdeas
  const onClick = data => {
    setFilter({ ...filter, ...data });
    filterIdeas(filter);
  };

因此onClick附加到渲染方法中的下拉列表：

First dropdown:
<Dropdown.Item onClick={() => onClick({ orderBy: "popularityScore" })}>Popularity</Dropdown.Item>

Second dropdown:
<Dropdown.Item key={status.id} onClick={() => onClick({ statusId: status.id })}>
  {status.name}
</Dropdown.Item>

fetchIdeas()基本上運行一個在我的上下文中可用的函數，它為我的 axios 請求構建這些參數。 每次單擊時，都需要單擊兩次才能運行該想法。 有時它會按預期運行，但大多數時候需要單擊兩次。

我遇到這個問題的任何原因？

任何幫助將不勝感激！

Answer 1

嘗試這個

const onClick = data => {
  const newFilter = { ...filter, ...data }
  setFilter(newFilter)
  filterIdeas(newFilter)
}

代替

const onClick = data => {
  setFilter({ ...filter, ...data })
  filterIdeas(filter)
}

在 React setState是異步的，我想那是你的問題。 嘗試上面的代碼，如果它有效並且您不完全理解，請在下面發表評論，我將編輯答案以更清楚地解釋。 在這里閱讀我的其他答案（但在您的問題是異步setState的情況下），了解如何處理異步setState 。