Reactjs 警告：在React中实现搜索筛选器时遇到两个具有相同密钥的子级

我是新手，我一直在尝试对我拥有的数据实施搜索过滤器。然而，在搜索栏中输入查询时，我在控制台中遇到了这个错误

index.js:1 Warning: Encountered two children with the same key, `.$-M9EdZMRAOiy_QUS1yKA`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in ul (created by ForwardRef(GridList))
in ForwardRef(GridList) (created by WithStyles(ForwardRef(GridList)))
in WithStyles(ForwardRef(GridList)) (at space-card-grid.tsx:32)
in SpaceCardGrid (at search.tsx:59)
in div (at search.tsx:58)
in div (created by Col)
in Col (at search.tsx:57)
in div (created by Row)
in Row (at search.tsx:56)
in div (created by Container)
in Container (at search.tsx:55)
in div (at search.tsx:45)
in SearchPage (created by Context.Consumer)
in Route (at routes.tsx:9)
in Switch (at routes.tsx:8)
in Routes (at src/index.tsx:15)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.tsx:14)
in div (at src/index.tsx:13)
in FirebaseProvider (at src/index.tsx:11)

即使在尝试输入时，我也会反复出现错误，导致应用程序崩溃。这是我为搜索过滤器编写的代码

import React, { useRef, useState, useEffect } from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import SpaceCardGrid from '../space-card-grid/space-card-grid';
import { MDBCol } from 'mdbreact';
import { firebaseDb } from '../../utils/firebase/index';

type SpaceType = {
  id: string;
  description: string;
  title: string;
  imageId: number;
  likes: number;
  eventDate: string;
  startTime: string;
  endTime: string;
};

const allSpaces: SpaceType[] = [];
const SearchPage = () => {
  const [spaces, setSpaces] = useState<SpaceType[]>([]);

  firebaseDb.ref(`studios`).once('value', (snapshot) => {
    snapshot.forEach((space) => {
      allSpaces.push({ ...space.val(), id: space.key });
    });
    setSpaces(allSpaces.reverse());
  });

  const [searchQuery, setSearchQuery] = useState({ query: '' });
  const spaceCardGridRef = useRef(null);

  const searchQueryHandler = (event) => {
    setSearchQuery({ query: event.target.value });
    event.preventDefault();
  };

  let filteredspaces = spaces;

  if (searchQuery.query !== '')
    filteredspaces = spaces.filter((space) => {
      return space.title.toLowerCase().indexOf(searchQuery.query.toLowerCase()) !== -1;
    });

  return (
    <div>
      <br></br>
      <MDBCol md="6">
        <input
          className="form-control"
          placeholder="Search spaces of interest"
          onChange={searchQueryHandler}
          value={searchQuery.query}
        />
      </MDBCol>
      <Container fluid className="bottom-container">
        <Row style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
          <Col>
            <div className="grid-root">
              <SpaceCardGrid spaces={filteredspaces} spaceCardGridRef={spaceCardGridRef} />
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default SearchPage;

我从firebase读取数据，然后使用它，我怀疑问题在这里。所有数据都被正确读取并显示在屏幕上。该问题仅在我开始搜索时出现

为了更加清晰，我附上了浏览器的屏幕截图

在GridList组件中，可以通过将元素的索引附加到末尾，使映射数组的键更为唯一，例如：

items.mapitem，index=>{/*…您的逻辑…*/}；

---

我应该给你看一下我在哪里绘制了女孩名单的代码吗？是的，请。如果您能创建一个我很抱歉这么晚才发表评论，那将是最好的，但我能够设法解决这个错误。这是因为我使用搜索栏中的每个查询一次又一次地调用数据库中的所有对象，这就是导致多个子对象具有相同键的原因。