react-table可编辑的内容+排序；可编辑单元格不会更新？

Question

在一列中修改数据会影响排序顺序时，数据会正确重新排序，但是使用的输入不会更新为新的行数据。

在这里https://codesandbox.io/s/kky34kkwr

复制是最简单的

1. 在第2列“年龄”的第3行中输入99
2. 按标签
3. 请注意，第一行现在是我们编辑的行，age = 99，full = 198

我们应该在这里看到的是我们输入的99移到表格顶部的行（确实如此），并且替换我们编辑的先前位置的行的新行应具有与之关联的数据新行（不是99）。

我似乎无法找到一种方法来强制对此进行更新，甚至找不到一个卑鄙的黑客手段以不明智的方式实现我想要的目标。希望有人可以帮忙！

编辑：该图像显示上述指示的步骤2之后的显示。

Answer 1

对于任何为此苦苦挣扎的人，在我们等待修复的过程中，我已经找到了解决方法。

给出原始问题中的示例，将renderEditable替换为以下内容将正确执行操作：

renderEditable(cellInfo) {
  return (
    <div
      style={{ backgroundColor: "#fafafa" }}
      contentEditable
      suppressContentEditableWarning
      onBlur={e => {
        const data = [...this.state.data];
        data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
        data[cellInfo.index].full = data[cellInfo.index].age * 2;
        e.target.innerHTML = this.state.data[cellInfo.index][cellInfo.column.id];
        this.setState({ data });
      }}
    >{this.state.data[cellInfo.index][cellInfo.column.id]}</div>
  );
}

onBlur事件在表重新排序之前触发，因此，如果我们只是获取值，将其放在一边，然后将innerHTML重置为原始值，然后再通过{{ 1}}最终显示正确的值。这不是理想的方法，但是可行。不要忘记验证输入。

Answer 2

问题在于您是hot-calculating表的值full，并根据此full属性对表进行排序。要解决您的问题，您可以

1）不根据full对表格进行排序。

像这样

defaultSorted={[
  {
    id: "firstName",
    desc: true
  }
]}

2）避免热计算full，而仅在构造函数中对其进行一次计算。

类似这样的东西

this.state = {
  data: makeData().map(item => ({ ...item, full: item.age * 2 }))
};

和您的标题类似

{
  Header: "full",
  id: "full",
  accessor: "full",
}