Estaba obteniendo videos de una API y había duplicados. Entonces, apliqué uuid para generar una clave para cada uno - key={uuid()} - hasta que me di cuenta de que estaba generando una nueva clave para cada renderizado.
A continuación se muestra mi solución, pero no estoy muy seguro de si realmente está resolviendo el problema.
export default function VideoList({ videos, observedElement }) { const location = useLocation(); const videoList = videos.map((video, index) => { video.uuid = uuid(); return ( <Link to={`/videos/${video.id.videoId}`} state={{ backgroundLocation: location }} key={video.uuid} > <VideoListEntry info={video} ref={observedElement} /> </Link> ); return <div>{videoList}</div> }Editar: Sé que usar una identificación de db o crear una combinación dentro de los datos dados es más preferible. Pero solo quiero saber si hay una forma de generar una clave estable con uuid.
La forma correcta sería obtener la identificación directamente desde donde esté obteniendo los videos.
El siguiente sería generarlos en el momento en que los reciba desde la ubicación remota ( suponiendo que los obtenga de una API ). Entonces, inmediatamente después de obtenerlos, enriquézcalos con el uuid y luego guárdelos en el estado/tienda.
La tercera solución sería usar un useEffect dentro de su componente, que solo generaría identificadores cuando se modifica la propiedad del video.
export default function VideoList({ videos = [], observedElement }) { const location = useLocation(); const [videosWithId, setVideosWithId] = useState(videos); useEffect(() => { const withId = videos.map(video => ({ ...video, uuid: uuid() })) setVideosWithId(withId); }, [videos]); // use videosWithId from below this point, instead of the videos prop .... }defina una variable que contenga el valor de uuid de esta manera y utilícela, creo que funcionará para usted
export default function VideoList({ videos, observedElement }) { const location = useLocation(); const videoList = videos.map((video, index) => { let uuid = uuid() video.uuid = uuid return ( <Link to={`/videos/${video.id.videoId}`} state={{ backgroundLocation: location }} key={uuid} > <VideoListEntry info={video} ref={observedElement} /> </Link> ); return <div>{videoList}</div> }export default function VideoList({ videos, observedElement }) { const location = useLocation(); videos.forEach(video => video.uuid = uuid()); // loop through the list and generate the id const videoList = videos.map((video, index) => { return ( <Link to={`/videos/${video.id.videoId}`} state={{ backgroundLocation: location }} key={video.uuid} > <VideoListEntry info={video} ref={observedElement} /> </Link> ); return <div>{videoList}</div> }