如果没有 .map(No .map)，警告：列表中的每个孩子都应该有一个唯一的"key"道具

Question

我是NEXT JS的新手，面对这个奇怪的问题，在互联网上似乎没有解决方案。我收到这样的警告:列表中的每个子节点都应该有一个唯一的"键"。道具如下:

Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <tbody>. See https://reactjs.org/link/warning-keys for more information.
    at BodyRow (/home/anchal/development-backoffice/node_modules/rc-table/lib/Body/BodyRow.js:37:25)
    at Body (/home/anchal/development-backoffice/node_modules/rc-table/lib/Body/index.js:41:19)
    at Body (/home/anchal/development-backoffice/node_modules/rc-table/lib/Body/index.js:41:19)
    at table
    at div
    at div
    at /home/anchal/development-backoffice/node_modules/rc-table/lib/Table.js:126:23
    at /home/anchal/development-backoffice/node_modules/rc-table/lib/Table.js:126:23
    at div
    at DomWrapper (/home/anchal/development-backoffice/node_modules/rc-resize-observer/lib/SingleObserver/DomWrapper.js:31:34)
    at SingleObserver (/home/anchal/development-backoffice/node_modules/rc-resize-observer/lib/SingleObserver/index.js:27:24)
    at ResizeObserver (/home/anchal/development-backoffice/node_modules/rc-resize-observer/lib/index.js:27:24)
    at Table (/home/anchal/development-backoffice/node_modules/rc-table/lib/Table.js:141:25)
    at div
    at div
    at Spin (/home/anchal/development-backoffice/node_modules/antd/lib/spin/index.js:100:37)
    at SpinFC (/home/anchal/development-backoffice/node_modules/antd/lib/spin/index.js:226:34)
    at div
    at InternalTable (/home/anchal/development-backoffice/node_modules/antd/lib/table/Table.js:73:34)
    at div
    at Assets (webpack-internal:///./src/collections/Assets/Assets.jsx:22:19)
    at div
    at AssetsPage (webpack-internal:///./src/pages/dashboard/assets.jsx:28:23)
    at SessionProvider (/home/anchal/development-backoffice/node_modules/next-auth/react/index.js:416:24)
    at MyApp (webpack-internal:///./src/pages/_app.js:17:18)
    at StyleRegistry (/home/anchal/development-backoffice/node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
    at AppContainer (/home/anchal/development-backoffice/node_modules/next/dist/server/render.js:390:29)
    at AppContainerWithIsomorphicFiberStructure (/home/anchal/development-backoffice/node_modules/next/dist/server/render.js:420:57)
    at div
    at Body (/home/anchal/development-backoffice/node_modules/next/dist/server/render.js:688:21)

我一直在几个地方使用带有关键属性的。map，但是为了检查问题的原因，我已经评论了使用。map的实例，但是问题仍然存在，我没有从哪里来的线索。

下面是我的src/collections/Assets/Assets.jsx:

import { AddAssets } from ".";
import { Table, Space, Button } from "antd";
import { useState } from "react";
import { DeleteData } from "..";
import { OwnerModal } from "..";
export const Assets = ({ assets, setAssets, collection, users }) => {
  const [asset, setAsset] = useState();
  const [editMode, setEditMode] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const columns = [
    {
      title: "User Id",
      key: "userId",
      render: (_, record) => <OwnerModal data={record}></OwnerModal>,
    },
    {
      title: "Title",
      dataIndex: "title",
      key: "title",
      // sorter: (a, b) => a.firstName.localeCompare(b.firstName),
    },
    {
      title: "Description",
      dataIndex: "description",
      key: "description",
    },
    {
      title: "Land Registery",
      dataIndex: "landRegistry",
      key: "landRegistry",
      render: (_, record) => (
        <a
          href={record?.landRegistry}
          target="_blank"
          rel="noopener noreferrer"
        >
          LandRegistry Image
        </a>
      ),
    },
    {
      title: "Floor Area",
      dataIndex: "floorArea",
      key: "floorArea",
    },
    {
      title: "Has Outdoor Space",
      key: "hasOutdoorSpace",
      render: (_, record) => String(record.hasOutdoorSpace),
    },
    {
      title: "Bedrooms",
      dataIndex: "bedrooms",
      key: "bedrooms",
    },
    {
      title: "Bathrooms",
      dataIndex: "bathrooms",
      key: "bathrooms",
    },
    {
      title: "Other Rooms",
      dataIndex: "otherRooms",
      key: "otherRooms",
    },
    {
      title: "Sale Time Frame",
      dataIndex: "saleTimeframe",
      key: "saleTimeframe",
    },
    {
      title: "Extra Conditions Labels",
      dataIndex: "extraConditionsLabels",
      key: "extraConditionsLabels",
    },
    {
      title: "Extra Conditions Descriptions",
      dataIndex: "extraConditionsDescriptions",
      key: "extraConditionsDescriptions",
    },
    {
      title: "AVM",
      // dataIndex: "AVM",
      key: "AVM",
      render: (_, record) => (
        <a href={record?.AVM} target="_blank" rel="noopener noreferrer">
          AVM
        </a>
      ),
    },
    {
      title: "Survey Proof",
      dataIndex: "surveyProof",
      key: "surveyProof",
      render: (_, record) => (
        <a href={record?.surveyProof} target="_blank" rel="noopener noreferrer">
          Survey Proof
        </a>
      ),
    },
    {
      title: "Images",
      dataIndex: "images",
      key: "images",
      render: (_, record) =>
        record.images.map((imageUrls, index) => (
          <div key={index}>
            <a href={imageUrls} target="_blank" rel="noopener noreferrer">
              Image {index + 1}{" "}
            </a>
          </div>
        )),
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            onClick={() => {
              setAsset(record);
              setEditMode(true);
              setShowModal(true);
            }}
          >
            Edit
          </Button>
          <DeleteData
            users={assets}
            setUsers={setAssets}
            collection={collection}
            data={record}
          />
        </Space>
      ),
    },
  ];
  const dataSource = assets;
  return (
    <>
      <AddAssets
        users={users}
        assets={assets}
        editMode={editMode}
        setEditMode={setEditMode}
        asset={asset}
        setAsset={setAsset}
        showModal={showModal}
        setShowModal={setShowModal}
        setAssets={setAssets}
        collection={collection}
      />
      <div className="mt-8">
        <Table
          scroll={{ x: true }}
          dataSource={dataSource}
          columns={columns}
          pagination={{
            position: ["bottomCenter"],
            pageSize: 20,
            showSizeChanger: true,
            hideOnSinglePage: true,
          }}
        />
      </div>
    </>
  );
};

src/pages/dashboard/assets.jsx来了:

import { prisma } from "~/prisma";
import Head from "next/head";
import { Navbar, Heading } from "~/components";
import { Users } from "~/collections";
import { useState } from "react";
import { Assets } from "src/collections/Assets";
import axios from "axios";
const AssetsPage = ({ collectionName, data, users }) => {
  const [assets, setAssets] = useState(data);
  return (
    <>
      <Head>
        <title>Backoffice - Assets</title>
      </Head>
      <Navbar currentPage="asset" />
      <div className="container mx-auto p-8 text-center">
        <Heading level={3}>Assets</Heading>
        <Assets
          users={users}
          assets={assets}
          // setAssets={setAssets}
          collection={collectionName}
        />
      </div>
    </>
  );
};
export default AssetsPage;
export const getServerSideProps = async () => {
  const { data } = await axios.get(
    process.env.NEXTAUTH_URL + `/api/asset/get/getAsset`
  );
  const users = await prisma.user.findMany({
    select: {
      id: true,
      email: true,
    },
  });
  return {
    props: {
      data,
      users,
      collectionName: "asset",
    },
  };
};

Answer 1

需要在表格中添加rowKey="id来解决这个错误。

        <Table
          dataSource={dataSource}
          columns={columns}
          rowKey="id"
        />