Javascript 显示功能产生的组件，替换屏幕上以前的组件

showButtons（1）

显示第1帧的单选按钮，

showButtons（400）

显示第400帧的单选按钮

此当前代码显示每一帧的所有单选按钮，最多400个，但我希望从第1帧开始显示一组单选按钮，并逐步更改，直到达到第400帧，每次都替换屏幕上以前的单选按钮

我似乎无法得到它，非常感谢任何帮助

import React from "react";

const Test = (props)=> {

  const keys = props.test.map(frame => Object.keys(frame));
  const filteredKeys = keys.map(frame =>
    frame.filter(key => new RegExp(/^roi\d+$/).test(key))
  );
  if (filteredKeys.length === 0) return null;
  const showButtons = (frameNumber) => {
  return filteredKeys[frameNumber].map((roi, index) =>  (
      <div>
        <label for={`roi${frameNumber}`}>{`roi${index}`}</label>
        <input type="radio" id={`roi${frameNumber}`} />
       </div>
    ));
  };


    var answers = []
    for (var i = 1; i < 400; i++){
      answers.push(showButtons(i))
    }


  return (
    <div className="Test">
      <div>
    {answers}    
      </div>
    </div>
  );
};
export default Test;

---

好的，根据您的评论最后再试一次：

const数据=[
{
roi0:[]，//永远不要在代码中使用这些值
roi1:[]，
},
{
roi0:[]，
roi1:[]，
roi2:[]，
},
];
常量测试=道具=>{
常量[currentFrame，setCurrentFrame]=React.useState（0）；
const frames=React.useMoom（（）=>{
const keys=props.test.map（frame=>
对象。关键点（帧）
);
返回key.map（frame=>
frame.filter（key=>newregexp（/^roi\d+$/）.test（key））
);
}，[道具测试]；
持续播放=当前帧<帧长度-1；
React.useffect（（）=>{
让定时器；
const up=（）=>{
setCurrentFrame（frame=>frame+1）；
定时器=播放和设置超时（上限为1000）；
};
定时器=播放和设置超时（上限为1000）；
return（）=>clearTimeout（计时器）；
}，[玩]；
返回(
setCurrentFrame（0）}>
重置
{currentFrame>=frames.length
无效的
：frames[currentFrame].map（（roi，索引）=>(
{`roi${index}`}
))}
);
};
ReactDOM.render(
,
document.getElementById（'root'））
);

这是否回答了您的问题？基本上第三次你问同样的问题时，你也问了它@HMR没有答案，在这里以更清晰的方式阐述了这个问题。这篇文章更能说明我想要什么吗？你也忽略了所有的评论和答案，只是转载了相同的代码。您想创建一个包含400个复选框或400个帧的列表吗？您的代码将生成400帧，您的描述显示为400帧，因此不清楚当前代码的错误。@HMR是的，就是这样，帧可以有多个单选按钮与之关联，不寻找争议只是每次都改善了我的问题，我认为当前的问题解释得很好。是的，这非常接近我需要的，谢谢！但是，我不需要选择每一帧，而是需要它在0.5秒后自动转换到例如第2帧，所以可能需要使用计时器，我不太确定。因为它将与视频一起运行。这可能吗？谢谢你的回答
[{"frame_number": 1, "roi0": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity0": 80.0, "roi1": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity1": 157.0},
{"frame_number": 2, "roi0": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity0": 80.0, "roi1": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity1": 158.0},
{"frame_number": 3, "roi0": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity0": 80.0, "roi1": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity1": 157.0},