TypeError: pictures.forEach不是一个函数

Question

我试图在点击时显示图像滑块。(滑块工作，但图片无法在其中看到)点击一个图像，我正在调用一个toggleLightBoxView函数。

但是得到这个错误

TypeError: pictures.forEach is not a function
toggleLightBoxView
src/Components/PreviewReport.js:145
  142 | const picContent =[];
  143 | const toggleLightBoxView = (pictures,pindex) =>{
  144 |   console.log(pictures)
> 145 |    pictures.forEach(ele => {
      | ^  146 |           if(ele.includes('.')) {
  147 |               picContent.push({
  148 |                   url: url+'/'+ele,

我无法在滑块上点击图片。请帮助修复此错误。

这是我的函数，我称之为图像onClick

      import React, { useState, useEffect } from "react";
        import ReactImageVideoLightbox from 'react-image-video-lightbox';
        const PreviewReport = (props) => {
        const [showLoader, setShowLoader] = useState(true);
        const [lightBoxMedia, setLightBoxMedia] = useState([]);
        const [mediaImages, setmediaImages] = useState([]);
        const [showLightBox, setShowLightBox] = useState(false);
        const [currIndx, setCurrentIndx] = useState(0);
        const [mediaImages, setmediaImages] = useState([]);
        
        
       const picContent =[];
      const toggleLightBoxView = (pictures,pindex) =>{
console.log(pictures)#result displayed below
         pictures.forEach(ele => {
                if(ele.includes('.')) {
                    picContent.push({
                        url: url+'/'+ele,
                        type: 'photo',
                        altTag: 'House  details - '+ele
                    });
                } else {
                    picContent.push({
                        url: `https://player.vimeo.com/video/${ele}`,
                        type: 'video',
                        title: ' Details Video'
                    })
                }
            })
        
        console.log("pictures_with_url",picContent)
        setmediaImages(picContent)
        console.log("pindex",pindex)
        setCurrentIndx(pindex);
        setShowLightBox(!showLightBox);
    }
        
        return (
        <>
        {showLoader ? <Preloader flag={!showLoader} /> : ""}
        { showLightBox ?  
        <div style={{ width: "100%", height: "100%", position: "fixed", zIndex: "9" }}>
        <ReactImageVideoLightbox data={mediaImages} startIndex={currIndx} showResourceCount={true} onCloseCallback={() => toggleLightBoxView(currIndx)} />
        </div>
        : ""} 
        
        {previewItemList.map((result,index) => {
        return (
          <div key={index} data-index={index}>
            {result.pictures.length > 0
            ? result.pictures.map(
              (pictures, pindex) => {
              return (
                  <div
                  key={pindex}
                  className="preview-image"
                  >
                  <img
                  src={`${url}/${pictures}`}
                  alt={pictures}
                  onClick={() => toggleLightBoxView(result.pictures,pindex)}
                  />
                  </div>
              );
              }
            )
            : ""}
        );
        };
        
        export default PreviewReport;

控制台结果的图片和图片与url数组。

pictures = [
    "IMG_0856.JPG",
    "IMG_0831.JPG",
    "IMG_0848.JPG"
]


pictures_with_url =[
{
    "url": "http://localhost:3000/reports/0413/YvQ0F5h6M80vWWWkewu3mPRb/juTxhlvBsTMaXPPcJmlq/IMG_0856.JPG",
    "type": "photo",
    "altTag": "House details - IMG_0856.JPG"
},
{
    "url": "http://localhost:3000/reports/0413/YvQ0F5h6M80vWWWkewu3mPRb/juTxhlvBsTMaXPPcJmlq/IMG_0831.JPG",
    "type": "photo",
    "altTag": "House details - IMG_0831.JPG"
},
{
    "url": "http://localhost:3000/reports/0413/YvQ0F5h6M80vWWWkewu3mPRb/juTxhlvBsTMaXPPcJmlq/IMG_0848.JPG",
    "type": "photo",
    "altTag": "House details - IMG_0848.JPG"
}

]

Answer 1

在mediaImages数组中，如下所示！

mediaImages={[
    {
      url: "https://placekitten.com/450/300",
      type: "photo",
      altTag: "some image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some video",
    },
    {
      url: "https://placekitten.com/550/500",
      type: "photo",
      altTag: "some other image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some other video",
    },
  ]}

目前您只按图像url！

想获得更多帮助，单击此处

Answer 2

如果您使用的是打字本。当您被定义为toggleLightBoxView参数时，类型仍然有问题吗？