这是一个简单的todo列表的屏幕截图，该列表将todo项目保留在左侧，并将完成的项目移动到右侧的框中：https://prnt.sc/dO_YFfgWAkC8
问题是，当我使用Array. filter（）根据项目的完成状态将其排序到一个新的Array中时，它们并不维护其索引，这导致我选中的项目正确地移动到右边的框中，但随后会对新数组中具有相同索引的项目应用一个选中标记。
来自GraphQL的查询：

const { loading, error, data } = useQuery(TODOS_QUERY);

数据：

data.todos = [ 
  {
    "id":"1",
    "title":"1",
    "completed":true
 },
 {
    "id":"2",
    "title":"2",
    "completed":false
 },
 {
    "id":"3",
    "title":"3",
    "completed":true
 }
]

切换完成功能：

const toggleCompleted = (id) => {
  toggle({variables: { id }});
  reset();
}

左侧方框：

{data.todos
  .filter(item => item.completed === false)
  .map((todo, key) => (
    <li onChange={() => toggleCompleted(todo.id)}
    key={key}><FormControlLabel control={<Checkbox />} label={todo.title} /></li>
))}

右侧方框：

{data.todos
    .filter((item) => item.completed === true)
    .map((todo, key) => (
      <li className="completed-item" onChange={() => toggleCompleted(todo.id)}
      key={key}><FormControlLabel control={<Checkbox defaultChecked />} label={todo.title} /></li>
))}

在我的特定示例中，如何维护索引？如果我刷新页面，它会自行修复，但我如何通过更新状态或仅在创建的新数组中维护相同的索引来以React方式执行此操作？当我单击复选框时，我确实已重新获取查询以更新状态，但这会将复选框向右移动，并且不会"t解决左框中的下一个复选框选中同一索引的问题。