Javascript 动态映射重渲染问题

我昨天遇到了这个映射问题。通过映射视频数组，动态地映射和构造整个div。我也有一个HTML视频标签里面，并希望展示每一个视频里面点击预览按钮。计划是使用映射

（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>
    )
}

---

当用户从步骤1到步骤8拍摄自己的视频时，数组元素在这里填充。对于popHTMLBox，我刚刚在这里更改了StackOverflow函数的名称，以便更清楚地了解它的功能，在这里它被命名为FlipVideo。

您能提供更多关于此组件的信息吗？很难从提供的代码片段中看出问题所在。我会说，你一般不应该使用索引作为键。这可能不是问题所在，但它会导致错误行为，特别是当您的阵列发生更改时。此外，您正在放置许多不必要的

键

属性。只有

元素行div

需要

键

。是的，我只是在无法修复它后才放上键，并认为它可能会有帮助，最初我只有两个键。这就是整个组成部分。它自动映射一个视频数组，只显示数组中的最后一个视频，而不是由打开它的按钮选择的特定视频。这可能是渲染功能，但肯定不是整个组件定义。例如，我们看不到您分配shootingSegment、displayRecordedVideo、popHTML5Box或globalState@rfestag是的，现在我粘贴了整个组件，带有真实名称（flipVideo而不是popHTMLBox）和在这里传输的全局状态。也许这可以给你一个更好的视角。当你说你通过给每个html行一个0-5之间的“值”来解决这个问题时，这是否意味着你给了它们一个字符串id，而不是试图使用索引作为

键？这里有一件奇怪的事情，如果'displayRecordedVideo.display'为真，您将得到多个
video
标记（每个元素一个），所有标记都具有相同的源。这是预期的吗？另外，您是否验证了单击时所需的
redoSegmentNumber.numero
值？您能否提供此组件的更多信息？很难从提供的代码片段中看出问题所在。我会说，你一般不应该使用索引作为键。这可能不是问题所在，但它会导致错误行为，特别是当您的阵列发生更改时。此外，您正在放置许多不必要的
键
属性。只有
元素行div
需要
键
。是的，我只是在无法修复它后才放上键，并认为它可能会有帮助，最初我只有两个键。这就是整个组成部分。它自动映射一个视频数组，只显示数组中的最后一个视频，而不是由打开它的按钮选择的特定视频。这可能是渲染功能，但肯定不是整个组件定义。例如，我们看不到您分配shootingSegment、displayRecordedVideo、popHTML5Box或globalState@rfestag是的，现在我粘贴了整个组件，带有真实名称（flipVideo而不是popHTMLBox）和在这里传输的全局状态。也许这可以给你一个更好的视角。当你说你通过给每个html行一个0-5之间的“值”来解决这个问题时，这是否意味着你给了它们一个字符串id，而不是试图使用索引作为
键？这里有一件奇怪的事情，如果'displayRecordedVideo.display'为真，您将得到多个
video
标记（每个元素一个），所有标记都具有相同的源。这是预期的吗？另外，您是否验证了
redo segmentnumber.numero
是单击所需的值？