react-table Editable 内容+排序； editable 单元格不更新？

Question

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

这里复现最简单https://codesandbox.io/s/kky34kkwr

在第 2 列 "age"、第 3 行中输入 99
按标签
注意顶行现在是我们编辑的行，age=99，full=198

我们应该在这里看到的是我们输入 99 移动到 table 顶部的行（就像它所做的那样），并且新行替换我们编辑的先前位置的行应该具有与该新行关联的数据（不是 99）。

我似乎找不到强制更新的方法，甚至找不到以不明智的方式实现我想要的东西的简陋黑客。希望有人能帮忙！

编辑：此图像显示了上述说明的第 2 步之后立即显示的内容。

Answer 1

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

1) 未根据 full.

对 table 进行排序

像这样

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

2) 避免 hot-calculating 你的 full，并且在你的构造函数中只计算一次。

像这样

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

你的header喜欢这样

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

Answer 2

对于遇到此问题的任何人，在我们等待修复的同时，我找到了解决方法。

鉴于原始问题中的示例，将 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 事件在 table 重新排序之前触发，所以如果我们只是获取值，将其放在一边，然后将 innerHTML 重置为之前的原始值使用 setState 触发度假村，我们最终会显示正确的值。这并不理想，但确实有效。不要忘记验证输入。

react-table Editable 内容+排序； editable 单元格不更新？

react-table Editable content + sorting; editable cell doesn't update?

javascript

reactjs

react-table