Javascript Apollo GraphQL为列表中的每个项目单独加载

我有一份待办事项清单：

• 项目1
• 项目2
• 项目3

每个项目都有一个删除按钮，可以删除单个项目。 每个项目都有一个旋转器，可以从

deletemotation

问题是： 在单个项目上按delete按钮后，微调器将为列表中的每个项目启用

我知道这里的问题，但不知道如何妥善解决。 我们可以为列表的每一项添加状态，以及打开微调器的逻辑

但我在这里寻找合适的解决方案。 也许有办法知道这个变异是用什么参数调用的，我将添加简单的代码

todos.map(({ id, title }) => (
  <div>
    <p>{title}</p>
    <button onClick={() => deleteMutation({ variables: { id } })}>
      {loading && id === deletedId ? <Spinner color="white" size="sm" /> : Delete}
    </button>
  </div>
))

todos.map（{id，title}）=>(
{title}

删除突变（{variables:{id}}}>
{loading&&id==deletedId？：Delete}
))

问题是使用/共享同一个变异实例，它的状态是-

加载

。下一个问题-同时删除两个项目可能是不可能的

可能的解决办法：

• 如果每个项目都有自己的变异-将其作为一个组件（react中的廉价抽象），请在内部定义变异。当然有点多余，但适合更复杂的项目或个人行动

• 。。。或者，在调用“变异”（在“onCompleted”中清除）之前，您必须使用一些标记（状态），例如

  itemBeingDeleted

  ，以阻止（禁用）其他项目删除按钮并在其中一个项目中显示加载

---

在单独的组件中移动项目逻辑可能是最好的解决方案！