时间戳

首页 > 解决方案 > 无法添加属性键，对象不可扩展错误 Apollo Client with antd

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

问题描述

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

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

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

  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值。这是我的解决方法，因为 ant 设计中的表从对象数组中获取数据，因此需要在其中有一个key值。由于从服务器查询数据通常不包括key对象中的属性，因此必须手动添加。

标签： reactjsantdapollo-client

解决方案

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

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

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

推荐阅读