显示函数产生的组件，替换屏幕上的先前组件

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;

Output.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>

显示函数产生的组件，替换屏幕上的先前组件

Display component produced by function, replacing previous component on screen

javascript

arrays

json

radio-button

reactjs