React - 处理状态数组中单元格的修改答案

【问题标题】：React - Handle modification of cell inside state's arrayReact - 处理状态数组中单元格的修改
【发布时间】：2017-08-09 08:06:59
【问题描述】：

我正在创建fixed-data-table-2 (npm) 的实现，其中一个编辑按钮将单元格更改为输入的，可以对其进行编辑然后保存（发布）。

但是有一个大问题... 打字太慢了，因为每次在单元格上触发onChange 时，我都会更新整个数组（处于状态）。

事件处理程序（表）

import reactUpdate from "react/lib/update";
onChangeEditableCell(field, rowIndex, newValue) {
    const data = reactUpdate(this.state.data, {[rowIndex]: {[field]: {$set: newValue}}})
    this.setState({data : data});
}

事件处理程序（单元格）

onChange(e) {
    e.preventDefault();
    const newValue = e.target.value;
    this.props.onHandleInput(this.props.field, this.props.rowIndex, newValue);
}

render() {
    const {rowIndex, field, data, editMode, onHandleInput, ...props} = this.props;

    return (
        <Cell {...props}>
            {editMode ? <input onChange={this.onChange} className="text-cell-edit" type="text" value={this.getCell()} /> : data[rowIndex][field]}
        </Cell>
    );
}

这显然是个坏主意...我怎样才能达到相同但性能方面的目标？

注意

onHandleInput（单元格的道具）是onChangeEditableCell（表格的函数）

附言

当用户点击Save 时，我需要data 数组来发布整个对象

【问题讨论】：

也许我没有关注，而是在“编辑模式”期间直接修改状态，为什么不修改状态的副本，当用户点击“保存”时，只需替换整个对象 - 还是深度合并这两种状态？
在状态之外创建变量是一种好习惯吗？如果是这种情况，我将搜索如何做到这一点。这似乎是一个更好的主意。
我不能 100% 确定 - 但将状态更改流式传输并在每次击键时强制重新渲染不必要的组件似乎也过分（并且“危险”）。
是的，表级状态不应该在每次按键时都改变。那种东西应该生活在细胞级别的状态。然后只有当按下保存按钮时，表级状态才会更新。
我对此深有感触，但我总是发表关于“愚蠢”和“无状态”组件的文章，我几乎总是尝试这样做。但是关于“单元级”状态，当Save 被点击时，我将如何更新表格的状态？

标签： javascript reactjs ecmascript-6 fixed-data-table

【解决方案1】：

在这种情况下，我所做的是让单元格拥有自己的状态，每次按键都会更新。然后使用onblur 事件更新表级状态，该事件在输入失去焦点后触发。

在我看来，个人输入是向上拉状态的一般做法的一个很好的例外。

【讨论】：

嗯，我试过了，效果很好。我会等着看是否有人有更好的主意。但这很适合。

【解决方案2】：

尝试添加一些超时：

onChange(e) {
  e.preventDefault();
  const newValue = e.target.value;
  if (this.timeout) {
    clearTimeout(this.timeout);
    this.timeout = 0;
  }
  this.timeout = setTimeout(()=> {
    this.props.onHandleInput(this.props.field, this.props.rowIndex, newValue);
  }, 1000);

}

【讨论】：