警告：列表中的每个子元素在 React.js 中都应该有一个唯一的“key”属性

Question

我已经尝试了所有可能的方法来解决这个问题。我firebase firestore用于数据库。

这是我的数据怎么看在Firestore- IMAGE
这是怎么我的files directorylooks- IMAGE

因此，我正在从中获取数据Firestore并将该数据传递给CardUIVerify.js和CardUIBan.js。

Order of data- Data.js->CardUIVerify.js,CardUIBan.js->Panel.js->App.js->index.js

从firestore(filename- Data.js)-获取数据的代码

import React, { useState, useEffect, createContext } from "react";
import fire from "../Firebase";

export const DataContext = createContext();

export function DataProvider({ children }) {
  const [showdata, setShowData] = useState([]);

  const fetchedItem = async () => {
    var usersRef = await fire.firestore().collection(`users`);
    var response = await usersRef
      .where("isVerified", "==", false)
      .where("certificate", "==", null);

    response.onSnapshot((querySnapshot) => {
      var data = [];
      querySnapshot.forEach((doc) => {
        data.push(...showdata, doc.data());
      });
      setShowData(data);
    });
  };
  useEffect(() => {
    fetchedItem();
  }, []);

  return (
    <div>
      <DataContext.Provider value={[showdata, setShowData, fetchedItem]}>
        {children}
      </DataContext.Provider>
    </div>
  );
}

这是代码CardUIVerify.js-

import React, { useState, useEffect, useContext } from "react";
import { Card, Button } from "react-bootstrap";
import "./CardUIVerify.css";
import { DataContext } from "../contexts/Data";

function UIVerify() {
  const [showdata, setShowData] = useContext(DataContext);

  function renderCard(card) {
    return (
      <div id="grid1">
        <Card id="card-shape1" key={card.uid}>
          <Card.Img className="card-img1" variant="top" src={card.photoUrl} />
          <Card.Body>
            <Card.Title id="title1">
              {card.name},{card.gender == "Male" ? <></> : <>???</>}
            </Card.Title>
            <Card.Text className="details1">{card.about}</Card.Text>
            <Button
              className="custom-button11"
              variant="primary"
              size="md"
              active
              block
            >
              View Certificate
            </Button>
            <Button className="custom-button21" variant="success" active block>
              Verify
            </Button>
            <Button className="custom-button31" variant="danger" active block>
              Cancel
            </Button>
          </Card.Body>
        </Card>
      </div>
    );
  }

  return <div>{showdata && showdata.map(renderCard)}</div>;
}
export default UIVerify;

这是代码CardUIBan.js-

import React, { useState, useEffect, useContext } from "react";
import { Card, Button } from "react-bootstrap";
import "./CardUIBan.css";
import { DataContext } from "../contexts/Data";

function UIBan() {
  const [showdata, setShowData] = useContext(DataContext);

  function renderCard(card) {
    return (
      <div id="grid2">
        <Card id="card-shape2" key={card.uid}>
          <Card.Img className="card-img2" variant="top" src={card.photoUrl} />
          <Card.Body>
            <Card.Title id="title2">
              {card.name},{card.gender == "Male" ? <></> : <>???</>}
            </Card.Title>
            <Card.Text className="details2">{card.about}</Card.Text>
            <Button
              className="custom-button12"
              variant="primary"
              size="md"
              active
              block
            >
              View Obligations
            </Button>
            <Button className="custom-button22" variant="danger" active block>
              Ban User
            </Button>
            <Button className="custom-button32" variant="success" active block>
              Unban User
            </Button>
            <Button className="custom-button42" variant="danger" active block>
              Cancel
            </Button>
          </Card.Body>
        </Card>
      </div>
    );
  }

  return <div>{showdata && showdata.map(renderCard)}</div>;
}
export default UIBan;

这是代码Panel.js-

import React, { useContext } from "react";
import fire from "../Firebase";
import "./Panel.css";
import UIVerify from "./CardUIVerify";
import { DataContext } from "../contexts/Data";
import UIBan from "./CardUIBan";

function Panel() {

  const [showdata, setShowData, fetchedItem] = useContext(DataContext);
    
  function search1(event) {
    if (event.key === "Enter") {
      fetchedItem();
    }
  }

  function search2(event) {
    if (event.key === "Enter") {
      fetchedItem();
    }
  }

  return (
    <div className="app-panel">
      <div className="header-div">
        <h1 id="header">Welcome Admin</h1>
        <button className="panel-button" onClick={() => fire.auth().signOut()}>
          Sign out
        </button>
      </div>

      <div className="verification-div">
        <h2 className="v-header">Verification</h2>
        <input
          className="search-1"
          name="search"
          type="text"
          placeholder="Search.."
          autocomplete="off"
          onKeyPress={search1}
        />
        <UIVerify />
      </div>

      <div className="banned-div">
        <h2 className="b-header">Suspend</h2>
        <input
          className="search-2"
          name="search"
          type="text"
          placeholder="Search.."
          autocomplete="off"
          onKeyPress={search2}
        />
        <UIBan />
      </div>
    </div>
  );
}
export default Panel;

这是代码App.js-

import React, { useState } from "react";
import Login from "./components/Login";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Panel from "./components/Panel";
import PrivateRoute from "./PrivateRoute";
import { AuthProvider } from "./Auth";
import { DataProvider } from "./contexts/Data";

function App() {
  return (
    <div>
      <AuthProvider>
        <Router>
          <div>
            <Switch>
              <PrivateRoute exact path="/" component={Panel} />
              <Route exact path="/login" component={Login} />
            </Switch>
          </div>
        </Router>
      </AuthProvider>
    </div>
  );
}

export default App;

这是代码index.js-

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";
import { DataProvider } from "./contexts/Data";
import { AuthProvider } from "./Auth";

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider>
      <DataProvider>
        <App />
      </DataProvider>
    </AuthProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

这是我的错误的样子 - 错误图像

提前致谢！

Answer 1

每当您渲染一组组件时，React 都会抱怨需要 key 属性。

在您的情况下，它可能是return <div>{showdata && showdata.map(renderCard)}</div>;导致您出现问题的线路。要修复它，只需执行类似更改<div id="grid2">为的操作，<div id="grid2" key={card.id}> 如果您没有 id 属性，请使用唯一标识卡的任何内容。