Показать компонент, созданный функцией, заменив предыдущий компонент на экране

Question

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;

Вывод. json Файл, с которым я работаю в форме:

[{"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},

Answer 1

Хорошо, попробуйте в последний раз, основываясь на ваших комментариях:

const data = [
  {
    roi0: [], //never use these values in your code
    roi1: [],
  },
  {
    roi0: [],
    roi1: [],
    roi2: [],
  },
];
const Test = props => {
  const [currentFrame, setCurrentFrame] = React.useState(0);
  const frames = React.useMemo(() => {
    const keys = props.test.map(frame =>
      Object.keys(frame)
    );
    return keys.map(frame =>
      frame.filter(key => new RegExp(/^roi\d+$/).test(key))
    );
  }, [props.test]);
  const playing = currentFrame < frames.length - 1;
  React.useEffect(() => {
    let timer;
    const up = () => {
      setCurrentFrame(frame => frame + 1);
      timer = playing && setTimeout(up, 1000);
    };
    timer = playing && setTimeout(up, 1000);
    return () => clearTimeout(timer);
  }, [playing]);
  return (
    <div>
      <div>
        <button onClick={() => setCurrentFrame(0)}>
          reset
        </button>
      </div>
      {currentFrame >= frames.length
        ? null
        : frames[currentFrame].map((roi, index) => (
            <div key={roi}>
              <label>
                {`roi${index}`}
                <input type="radio" />
              </label>
            </div>
          ))}
    </div>
  );
};

ReactDOM.render(
  <Test test={data} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>