Reactjs 如何通过计时器上的类似组件进行渲染？

我已经创建了一个灵活的

组件，我想用不同的数据在7个面板中旋转。现在我有了一个方法，可以生成这些面板的数组，并具有正确的格式和数据

我能以设定的间隔（比如10秒）循环显示这些内容的最有效方式是什么？我希望能够添加一个in/out动画，但这是以后的功能。 请告诉我你们需要什么额外的信息来帮助我。以下是一些代码片段：

生成

的数组 如何渲染单个面板

render（）{
返回(
{this.instancePanels（）[2]}//例如
);
}

---

非常感谢您在这方面的帮助。React对我来说是新事物，因此非常感谢您所做的任何贡献。

您可以将索引存储在一个状态中，并使用

setTimeout

每10秒更新一次该状态

您只需要调用

this.instancePanels（）

一次，所以在

渲染

之前执行此操作并保存结果，然后在

渲染

索引中使用状态中的索引保存数组

此外，如果面板实例化与您的代码片段一样简单，我将完全避免实例化，而是使用如下呈现函数：

render() {  
  return (
    <div className="App">
      <Panel data={this.state.data} currentPanel={panelIndexState} key={this.state.data.Key} />
    </div>
  );
}

（取决于您处理状态的方式）

---

然后在

componentDidMount

中调用

iteratePanelIndex（）

，以启动该代码段中的useInterval到哪里去？在render/return方法或其他地方，它将在渲染之前在组件中定义，并通过在componentdidmount中调用它来启动。我将用另一个模糊的片段为您更新答案

    componentDidMount() {
        fetch("extranet path .json") //
            .then(response => response.json())
            .then(newData => {
                if (newData && newData.length > 0) {
                    console.log("data", newData[0]);
                    this.setState({data:newData[0]});
                } else {
                    console.error('error downloading data, returned: ' + newData);
                }
            }
        );
    }

    render() {  
        return (
            <div className="App">
                {this.instantiatePanels()[2]} // for example
            </div>
        );
    }

render() {  
  return (
    <div className="App">
      <Panel data={this.state.data} currentPanel={panelIndexState} key={this.state.data.Key} />
    </div>
  );
}

const iteratePanelIndex = () => {
    this.setState((state) => {
        ...state,
        panelIndexState: (state.panelIndexState +1) % 7
    })
    setTimeout(iteratePanelIndex, 10000);
};