当动态渲染列时，出现最大调用堆栈超出的错误([email protected])

Question

我得到的是 最大调用堆栈超出错误 当我的表列使用的是dyanmically渲染的 react-table (v6) 库，下面是我的数据结构

对象 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列的列。

截图

我使用的是 [email protected]

Answer 1

其中一个数据结构出现了问题 <StockRange cs={cs} hs={hs} os={os} /> 导致错误的组件，这与反应表无关。