为什么我无法让 iframe 在循环内打开？

Question

我有这段代码，应该通过视频数组循环，并在if条件下获得指定条件下的键，但iframe不会打开，模态正在打开，但iframe不是。当我控制台记录密钥时，它完美地显示了它，没有循环，iframe正在显示，是否有一种方法可以循环并获得我需要的密钥并将其放在iframe中。

import axios from "axios";
import React, { useEffect, useState } from "react";
const Modal = ({ closeModal, id, name }) => {
const [video, setVideo] = useState([]);
useEffect(() => {
axios
.get(
`https://api.themoviedb.org/3/movie/${id}/videos?api_key=<<api_key>>&language=en-US`
)
.then((response) => {
setVideo(response.data.results);
// console.log(response.data);
});
}, []);
return (
<div className="bg-black/60 fixed top-0 left-0 w-full h-screen   ">
<div className="flex h-screen justify-center items-center">
<div className="p-4 w-full max-w-2xl h-full md:h-auto">
<div className="relative bg-transparent rounded-lg shadow ">
<div className="flex justify-between items-start p-4 rounded-t border-b">
<h3 className="text-xl font-semibold text-gray-200 ">{name}</h3>
<button
onClick={() => closeModal(false)}
type="button"
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-toggle="defaultModal"
>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
></path>
</svg>
</button>
</div>
<div className="p-6 space-y-6">
{video &&
video.map((item, i) => {
if (
item?.type == "Trailer" &&
item?.name == "Official Trailer"
) {
<iframe
width="560"
height="315"
src={`https://www.youtube.com/embed/${item?.key}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>;
console.log(item?.key);
}
})}
</div>
</div>
</div>
</div>
</div>
);
};
export default Modal;

Answer 1

原因是在循环时没有返回iframe。

{video &&
video.map((item, i) => {
if (
item?.type == "Trailer" &&
item?.name == "Official Trailer"
) {
return <iframe
width="560"
height="315"
src={`https://www.youtube.com/embed/${item?.key}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>;
console.log(item?.key);
}
})}

OR，如果您想跳过return关键字，最好将花括号{}替换为圆括号()。圆括号用作返回语句。someArray.map(x => (<iframe>.....</iframe>))

你在console.log()中获得值的原因是.map()函数仍在工作，就像它的循环一样，但它只是没有返回任何东西给UI。所以你在里面的所有计算仍然可以正常运行。