commitMutation 防止 setState 在 handleSubmit 中重新渲染组件答案

【问题标题】：commitMutation prevents setState from re-rendering component in handleSubmitcommitMutation 防止 setState 在 handleSubmit 中重新渲染组件
【发布时间】：2021-03-04 00:58:15
【问题描述】：

我正在尝试在 Relay 中实现一个表单，当您单击提交按钮时，文本将替换为加载图标。

处理提交功能：

const handleSubmitNewDetails = (e) => {
  e.preventDefault();
  setIsDetailsInFlight(true); // Show loading icon
  commitUpdateDetails(
    {
      name: name,
      email: email,
      dob: dob,
  },
  () => { setIsDetailsInFlight(false) }, // on completed
  () => { setIsDetailsInFlight(false) }, // on error
);

};

我的 handleSubmit 函数应该将突变的“飞行中”状态设置为 true。当 commitUpdateDetails 不存在时，这会导致重新渲染，从而成功渲染加载图标。当 commitupdateDetails 存在时，这不起作用。

commitUpdateDetails 有效，并且我在响应时间中添加了人为延迟来测试加载图标，因此延迟不是问题。

我猜测，除非句柄功能完成，否则即使在等待异步功能时，中继或反应也不会完成设置允许重新渲染的状态？如果是这样，有没有办法解决这个问题...？

更新：

在回调中不使用 setState 钩子会导致加载图标出现，所以我猜 react/relay 正在管理这个，不知道如何解决。

更新 2：

使用 setTimeout 而不是 commitMutation 设置一个简单的处理程序非常有效，所以我不明白为什么在等待突变完成时没有渲染。

【问题讨论】：

标签： reactjs relayjs relay

【解决方案1】：

将commitMutation（在commitUpdateDetails 中调用）包装在一个promise 中有效。我不知道为什么它以前不起作用。一个解释会很棒:)

【讨论】：