map 中的“Key”道具

Question

新手在這里，很抱歉這個愚蠢的問題:)

如何將“鑰匙”道具放入這個 function 中？

代碼在ContactShadows上面。 我嘗試了很多方法，但我嘗試的所有方法都無法正常工作。 你能檢查一下並告訴我如何放置“鑰匙”道具嗎？

    import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";

import "./PartOne.css";

const PartOne = () => {
const [rooms, setRooms] = useState([
    Room1,
    Room2,
    Room3,
    Room4,
    Room5,
    Room6,
    Room7,
    Room8
]);

useEffect(() => {
    console.log("rooms state:", rooms);
}, [rooms]);

return (
    <div className="wrapper">
        {rooms.map((room, roomIndex) =>
            room({ position: positions[roomIndex] })
        )}
    </div>
);
};
export default PartOne;

謝謝你

Answer 1

您可以將room function 中的元素包裝在<React.Fragment>中並為其分配key ：

return (
    <div className="wrapper">
        {rooms.map((room, roomIndex) => (
            <React.Fragment key={`${roomIndex}`}>
                {room({ position: positions[roomIndex] })}
            </React.Fragment>
        ))}
    </div>
);