动态渲染列时最大调用堆栈超出错误（react-table@6.11.5）

Question

我在使用 react-table (v6) 库动态渲染我的 table 列时收到 最大调用堆栈超出错误，下面是我的数据结构

dcs

的对象

{
  "13": {
    "id": "13",
    "name": "xyz",
  },
  "14": {
    "id": "14",
    "name": "xyz 1",
  },
  "15": {
    "id": "15",
    "name": "xyz 2",
  },
  "16": {
    "id": "16",
    "name": "xyz 3",
  }
}

数组 items

[
{
  "id": "72",
  "name": "Vegetable Basket A",
  "codename": "100666",
  "stocks": {
    "13": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "24",
      "offerStockCount": 2000
    },
    "14": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "27",
      "offerStockCount": 2000
    },
    "15": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "26",
      "offerStockCount": 2500
    },
    "16": {
      "currentStockCount": 1000,
      "holdStockCount": 0,
      "id": "25",
      "offerStockCount": 1500
    }
  }
}
... 9 more items
]

这是它们最终的渲染方式

const DC_COLUMNS = useMemo(() => {
    return Object.values(dcs).map((dc) => {
      return {
        width: 200,
        Header: dc?.name,
        // Basically only access the stock for the particular dc
        // This is the trouble line, the issue fades away after I remove dc.id
        accessor: `stocks.${dc.id}`,
        Cell({ value }) {
          const cs = value?.currentStockCount ?? 0;
          const hs = value?.holdStockCount ?? 0;
          const os = value?.offerStockCount ?? 0;
          return <StockRange cs={cs} hs={hs} os={os} />;
        },
      };
    });
  }, [dcs]);

<CustomReactTable
        pageSize={10}
        leftAlign
        loading={loading}
        data={items}
        columns={DC_COLUMNS}
      />

重现步骤（必需） 1. 至少有 10 行的列表 2. 至少动态生成列 4

截图

我正在使用react-table@6.11.5

Answer 1

导致错误的 <StockRange cs={cs} hs={hs} os={os} /> 组件之一存在问题，这与反应无关 table

动态渲染列时最大调用堆栈超出错误（react-table@6.11.5）

Maximum call stack exceeded error when rendering columns dynamically (react-table@6.11.5)

javascript

performance

callstack

reactjs

react-table