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.');

        });

    }

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

1 个答案: