列表中的每個孩子都應該有一個唯一的“關鍵”道具控制台錯誤

Question

請幫忙。 我不知道為什么會出現此錯誤：我找不到需要更改的內容。（瀏覽器中所需的 output 非常好。但我收到此錯誤。我不習慣列出和鍵關於反應。我有最新版本的 React 和 Nodejs 以及所需的包

主屏幕.js：

 import React, { useState, useEffect } from 'react' import axios from 'axios'; import Room from '../components/Room'; import Loader from '../components/Loader'; import Error from '../components/Error'; function Homescreen() { let [rooms, setrooms] = useState([]); const [loading, setloading] = useState(); const [error, seterror] = useState(); useEffect(() => { async function getResults() { try { seterror(false); setloading(true); const data = (await axios('/api/rooms/getallrooms')).data; setrooms(data); setloading(false); } catch (e) { seterror(true); setloading(false); } } getResults(); }, []); return ( <div className='container'> <div className='row justify-content-center mt-5'> {loading? ( <Loader /> ): rooms.length > 1? ( rooms.map(room => { return <div className="col-md-9 mt-3"> <Room room={room} /> </div>; }) ): ( <Error /> )} </div> </div> ) } export default Homescreen; //<h1>{room.name}</h1>

和我的 Room.js：

 import React, { useState } from "react"; import { Modal, Button, Carousel } from 'react-bootstrap' import { First } from "react-bootstrap/esm/PageItem"; import { Link } from 'react-router-dom' function Room({ room }) { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( < div className="row bs" > <div className="col-md-4"> <img src={room.imageurls[0]} className="smallimg" /> </div> <div className="col-md-7"> <h1>{room.name}</h1> <b> {" "} <p>Max Count: {room.maxcount}</p> <p>Phone Number: {room.phonenumber}</p> <p>Type: {room.type}</p> </b> <div style={{ float: "right" }}> <Link to={`/book/${room._id}`}> <button className="btn btn-primary m-5">Book Now.</button> </Link> <button className="btn btn-primary" onClick={handleShow}>View Details</button> </div> </div> <Modal show={show} onHide={handleClose} size='lg'> <Modal.Header> <Modal.Title>{room.name}</Modal.Title> </Modal.Header> <Modal.Body> <Carousel prevLabel='' nextLabel=''> {room.imageurls.map(url => { return <Carousel.Item> <img className="d-block w-100 bigimg" src={url} /> </Carousel.Item> })} </Carousel> <p>{room.description}</p> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> Close </Button> </Modal;Footer> </Modal> </div> ); } export default Room;

瀏覽器控制台錯誤：

Answer 1

您必須給 map function 中的第一個元素一個鍵：

rooms.map((room, index) => {
  return (
    <div key={index} className="col-md-9 mt-3">
      <Room room={room} />
    </div>
  );
});