Ag grid Ag网格：如何保持传递到CellRenders的外部数据保持新鲜

因此，我试图实现的功能类似于使用ag网格内置单元格编辑时，

editType:“fullRow”

功能的工作方式，该行中的所有单元格都可以编辑

我之所以使用自定义cellRenderer而不是cellEditor组件，是因为在编辑一行然后单击另一行时，我无法阻止cellFocus，这将导致编辑停止（我不希望）

因此，当您单击位于表格每一行中的“编辑”按钮时，该行中的CellRenderer应该更新以显示输入。无论何时对这些输入中的任何一个进行更改（通过

onBlur

），我都希望将该新值推送到处于react状态的数组中，将其称为

editedFields

（状态位于ag grid表的父级）

目前，我正在将

editedFields

传递到

columnDefs

中，然后通过

valueFormatter

将其传递到我的单元格渲染器中：

 {
  headerName: "Job #",
  field: "job_number",
  width: 100,
  valueFormatter: params => ({
    editing: editRow && selectedRow.id === params.data.id,
    columnName: "job_number",
    editedFields,
    setEditedFields,
    selectedRow
  }),
  cellRenderer: "textInputCellRenderer",
  suppressMenu: true
},

以下是我的

textInputCellRenderer

的外观：

const TextInputCellRenderer = params => {
  const [input, setInput] = useState(params.value || "");

  const {
    editing,
    columnName,
    editedFields,
    setEditedFields,
    value
  } = params.formatValue();

  if (!editing) {
    return <span>{params.value || value || ""}</span>;
  }
  
  return (
    <input
      value={input}
      className="text-input-cell"
      type="text"
      onBlur={() => setEditedFields([...editedFields, { [columnName]: input}])}
      onChange={e => {
        setInput(e.target.value);
      }}
    />
  );
};

const TextInputCellRenderer=params=>{
const[input，setInput]=useState（params.value | | |“”）；
常数{
编辑，
专栏名称，
编辑字段，
设置编辑字段，
价值
}=params.formatValue（）；
如果（！编辑）{
返回{params.value | | value | |“”；
}
返回(
setEditedFields（[…editedFields，{[columnName]：input}]）}
onChange={e=>{
设置输入（如目标值）；
}}
/>
);
};

问题是当我调用

onBlur

时，它会导致ag网格崩溃，并给出错误：

TypeError:无法在FocusController.onColumnEverythingChanged读取null的属性“getId”

当我在编辑时（无论何时
editedFields
发生更改）添加对
setColumnDefs
的调用，以获取我们正在更新的行中每个
textInputCellRenderer
中最新的
editedFields
时，就开始出现这种情况。在此之前，我会对一个单元格进行更改，
editedFields
将正确填充，但如果我也在另一个单元格中进行更改，则该单元格渲染器中的
editedFields
将为空