在 API 中反应计数数组并重新设置/重新启动

Question

大家好，我一直在尝试在 React 中创建一个使用工作人员 API 的 Rota，这是我一直在使用的代码。目前，它读取数组，然后每 3 秒向状态添加一个随机数。

我想要它做的是从 0 计数到数组的值，然后重置。有任何想法吗？

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import { once, every, daily } from 'bella-scheduler';

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
          data: [0]
      }
  }

  componentDidMount() {
      axios.get('http://localhost:3333/staff')
      .then((response) => {
          this.successShow(response);
      })
      .catch((error) => {
          this.successShow('error');
      });
  }


  successShow(response) {
        console.log(response.data);

        every('3s', () => {

            var i = Math.floor(Math.random()*(response.data.length))
            this.setState({person: response.data[i].name});
            console.log('Resolved task.');

        });

    }


  render() {
      return (
          <div className="main">
            <h2 className="title">Rota</h2>
            <h3>{this.state.person}</h3>
          </div>
      );
  }
}


export default App;

Answer 1

您必须添加一个计数器而不是 random() 索引器来显示彼此的名称。

所以在你的状态中添加一个 cnt 或 counter 变量，然后每 3 秒增加一次数字，但将其与 % 一起使用，如下所示以防止索引问题。

对于构造函数：

constructor(props) {
      super(props);
      this.state = {
          data: [0],
          cnt:0
      }
  }

对于successShow函数：

successShow(response) {
        console.log(response.data);

        every('3s', () => {

            var i = this.state.cnt++;
            this.setState({person: response.data[i%response.data.lenght].name});
            console.log('Resolved task.');

        });

    }