Question

昨天我遇到了这个映射问题。因此，通过映射video数组可以动态映射和构造整个div。我内部也有一个html5视频标签，并想通过单击预览按钮在其中展示每个视频。计划是通过使用映射（m，i）中的索引来访问该特定视频。

问题来了。无论我单击哪个视频，正在显示的视频始终是最后一个视频。看来，当我单击打开带有视频的html5时，整个页面都将重新呈现-这样就重新映射了一次-并且只显示了数组中的最后一个视频。

我确实设法找到了解决方法（通过为每个视频的HTML行赋予值（0-5），并通过单击来获取该值，并使用该数字访问数组中的视频），但这就是不是正确的方式，我仍然很好奇为什么我无法通过映射看到正确的视频。有人可以帮我解释一下吗？这是代码

import { useContext, useState } from 'react'
import { FaCamera } from 'react-icons/fa'
import { FaInfo } from 'react-icons/fa'
import { GiRapidshareArrow } from 'react-icons/gi'
import { AiOutlineCloseCircle } from 'react-icons/ai'
import Link from 'next/link'
import { useRouter } from 'next/router'

import { CarContext } from '../_app'

export default function SubmitSegment() {

    const router = useRouter()

    const { shootingSegment, freeShotForm, redoSegmentNumber, setRedoSegmentNumber } = useContext(CarContext)

    const [displayRecordedVideo, setDisplayRecordedVideo] = useState({
        display: false,
    })

    const flipVideo = () => {
        setDisplayRecordedVideo({
            display:!displayRecordedVideo.display
        })
    }

    const consoleLogTheState = () => {
        console.log(shootingSegment.videoBlobs, freeShotForm)
    }

    const getHTMLRowName = (e) => {
        const currentRow = e.currentTarget.id
        setRedoSegmentNumber({
            numero:currentRow
        })
    }

    const makeNumber = parseInt(redoSegmentNumber.numero)

    return (
        <div className='background-semi-black-layer'>
            <div className='CarLife-repeating-title'>
                <div className='carlife-header-text'>
                    CarLife
                    <div className='carlife-header-symbol'>
                        &trade;
                    </div>
                </div>
            </div>


            <div className='submit-page-body-free-shot'>

                {  shootingSegment.videoBlobs.map( (m,i) =>     
                    <div className='elements-row-div-free-shot' key={i} id={i} onClick={getHTMLRowName} >
                    <div className='left-side-row' > 
                        <button className='entry-btn' onClick={flipVideo} key={i} >
                            <FaCamera className='submit-camera-icon-left'  />
                          {  displayRecordedVideo.display &&

                                    <div className='display-current-step-recorded-video' key={i} >
                                        <AiOutlineCloseCircle onClick={flipVideo} className='exit-preview-your-recorded-video-icon'  />
                                        <video className='video-source' controls key={i}>
                                            console.log(i)
                                            <source src={shootingSegment.videoBlobs[makeNumber]}  />
                                        </video>
                                    </div>
                                }
                        </button>
                        <p className='text-under-camera-left' >Segment #{i+1}</p>
                    </div>

                    <div className='right-side-row-free-shot' >     
                            <Link href='/free-shot/override-segment'>
                                <a>
                                <GiRapidshareArrow className='submit-icon-right-free-shot'  />
                                </a>
                                </Link>
                        <p className='text-under-camera-left'  >Redo this segment</p>
                    </div>
                </div>

                    ) }

            </div>

            <div className='submit-button-free-shot'>
            <button className='next-step-button' onClick={consoleLogTheState} >Submit
                    <p> > </p>
                    </button>
            </div>
        </div>
    )
}

问题出在源src。好的，我正在编辑并插入整个代码。射击环节是通过Contex转移的全局状态

const [shootingSegment, setShootingSegment] = useState({
      segmentComplete: false,
      videoBlobs: [video1, video2, video3, video4, video5...]
})

当用户从第1步转到第8步并拍摄自己的视频时，将在此处填充数组元素。对于popHTMLBox，我只是在这里更改了Stack Overflow的函数名称，因此可以更清楚地了解其功能，在这里名为FlipVideo。

动态映射重新渲染问题

0 个答案: