无法添加属性键，对象不可扩展错误 Apollo Client with antd答案

【问题标题】：Cannot add property key, object is not extensible error Apollo Client with antd无法添加属性键，对象不可扩展错误 Apollo Client with antd
【发布时间】：2020-11-15 19:44:41
【问题描述】：

在 ant design 中使用 "@apollo/client": "^3.0.2" 时出现错误 Cannot add property key, object is not extensible。

我可以使用我的 graphql 查询成功地从服务器获取数据，但是，问题是，返回对象中的数据在某种程度上是不可扩展的。在使用 apollo 客户端（使用 apollo boost）之前，这从来都不是问题。

为了让我的数据在ant design的表中工作，我必须传入从服务器返回的data对象获得的数组数据。我得到错误的部分是当我尝试遍历 items 数组，并向每个对象添加一个 key 时，这样反应就不会在控制台中抱怨 html 缺少 key 元素.

  const items = [...data.items];
  console.log("items:", items);

  // Add a key for each item to make React stop complaining
  // Erorr occurs here!!!
  items.forEach(item => {
    item.key = item.id;
  });

有没有一种方法可以消除这种不必要的功能，这些功能阻碍了我们修改和扩展从服务器获得的结果的能力？我还尝试传播数组以制作深层副本，但这也不起作用。

我需要做些什么来确保我可以根据id 在每个数组项中添加一个额外的key 字段？

附录：

我实际上并不需要执行items.forEach() 的代码。但是，如果我不添加它，react 会抱怨表中的条目都缺少key 值。这是我的解决方法，因为 ant 设计中的表从对象数组中获取数据，因此需要在其中有一个 key 值。由于从服务器查询数据通常不会在对象中包含key 属性，因此必须手动添加。

【问题讨论】：

你能展示你渲染这些项目的方式吗？
@MaciejTrojniarz
它可以正确呈现，但是如果你打开控制台，你会得到反应，抱怨表中的每一行都没有key，在那里它获得了每个数组对象的 key 值的键（这是我试图设置的，但它不会让我因为对象不可扩展）

标签： reactjs antd apollo-client

【解决方案1】：

设法通过 lodash 深度复制数组数据来解决这个问题。

在返回的data 的对象上使用_.cloneDeep()，这是您要查询的对象/表的名称。

import * as _ from "lodash";
import { Table } from "antd";

function Component({ id, query }) {
  const { loading, error, data } = useQuery(query, {
    variables: { id }
  });

  if (loading) return <div />;
  if (error) return `Error! ${error}`;

  const items = _.cloneDeep(data.items);
  console.log("items:", items);

  // Add a key for each item to make React stop complaining
  items.forEach(item => {
    item.key = item.id;
  });

  return (
          <Table
            dataSource={items}
          />
  );

【讨论】：