如何停止重新渲染 TanStack React Table，直到输入字段完全输入？

Question

我正在创建一个表格，其中可以在其中一列中输入单价，另一列根据输入的输入和另一列“数量”中的值计算总价（总价 = 数量 * 单价）。我在 React 的普通表中实现了这个，没有任何库，但我想实现过滤和排序，所以我决定将其迁移到 TanStack Table。

问题是，只要我在输入中输入一个字符，输入元素就会被取消选择。我发现原因可能是只要我输入一个字符，表格就会重新呈现，因此我无法输入整个输入。如何解决这个问题？

const defaultColumns = [

    // Accessor Column
    columnHelper.accessor("totalQty", {
      cell: (info) => info.getValue(),
      footer: (props) => props.column.id,
      header: () => <span>Quantity</span>,
    }),
    // ...other columns
    // Accessor Column
    columnHelper.accessor("unitPrice", {
      header: "Unit Price",
      footer: (props) => props.column.id,
      cell: (props) => (
        <input
          type="number"
          className="number-input"
          value={props.row.original.unitPrice}
          onChange={(e) => {
            handleUnitPriceChange(props.row.index, Number(e.target.value));
          }}
        />
      ),
    }),
    // Accessor Column
    columnHelper.accessor(
      (row) => {
        return row.totalQty ? row.totalQty * row.unitPrice : null;
      },
      {
        header: "Total Price",
        footer: (props) => props.column.id,
        cell: (props) => (
          <span>
            {props.row.original.totalQty
              ? props.row.original.totalQty * props.row.original.unitPrice
              : null}
          </span>
        ),
      }
    ),
  ];
  const table = useReactTable({
    data,
    columns: defaultColumns,
    getCoreRowModel: getCoreRowModel(),
  });

这是更新itemList中单价的函数：

function handleUnitPriceChange(index: number, up: number | null) {
    const updatedPurchaseReq = { ...purchaseReq };
    if (up !== null) {
      updatedPurchaseReq.itemList[index].unitPrice = up;
      updatedPurchaseReq.itemList[index].totalCost =
        up * updatedPurchaseReq.itemList[index].totalQty;
    } else {
      updatedPurchaseReq.itemList[index].unitPrice = 0;
      updatedPurchaseReq.itemList[index].totalCost = 0;
    }
    setPurchaseReq(updatedPurchaseReq);
  }

如何解决输入每个字符后未选择的问题？

我尝试使用 useMemo 修复重新渲染，但没有成功。一旦输入字符，表格就会重新呈现。

Answer 1

请问你做了什么来解决这个问题，我现在也是同样的情况吗