reactjs - Cannot add property key, object is not extensible 错误 Apollo Client with antd

Question

我得到一个错误 Cannot add property key, object is not extensible使用 "@apollo/client": "^3.0.2"用 Ant 设计。

我可以使用我的 graphql 查询从服务器成功获取数据，但是，问题是，返回对象中的数据不知何故不可扩展。在使用 apollo 客户端(使用 apollo boost)之前，这从来都不是问题。

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

  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;
  });

有没有一种方法可以删除这种阻碍我们修改和扩展从服务器获得的结果的能力的不必要功能？我还尝试传播阵列制作深拷贝，但这也不起作用。

我需要做什么来确保我可以添加额外的 key每个数组项中的字段，基于 id ？

附录:

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

Answer 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}
          />
  );