为什么在反应中执行状态更改需要两次点击？

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）关于如何处理 async setState。