Массив счетчика реакций в API и сброс / запуск заново
Привет всем. Я пытался создать Rota в React, который использует API сотрудников. Ниже приведен код, который я использовал. В настоящий момент он считывает массив, а затем каждые 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.info(response.data);
every('3s', () => {
var i = Math.floor(Math.random()*(response.data.length))
this.setState({person: response.data[i].name});
console.info('Resolved task.');
});
}
render() {
return (
<div className = "main">
<h2 className = "title">Rota</h2>
<h3>{this.state.person}</h3>
</div>
);
}
}
export default App;
Ответы 1
Вам нужно добавить счетчик вместо индексатора random (), чтобы имена отображались друг за другом.
Поэтому добавьте переменную cnt или counter в свое состояние, затем увеличивайте число каждые 3 секунды, но используйте его с%, как показано ниже, чтобы предотвратить проблемы с индексированием.
для конструктора:
constructor(props) {
super(props);
this.state = {
data: [0],
cnt:0
}
}
и для функции successShow:
successShow(response) {
console.info(response.data);
every('3s', () => {
var i = this.state.cnt++;
this.setState({person: response.data[i%response.data.lenght].name});
console.info('Resolved task.');
});
}
все актуально, но вы должны инициализировать первое значение для параметра cnt в конструкторе. Я добавил изменения в конструктор.
Большое спасибо за это! У меня это работает сейчас, только в ваших комментариях выше есть опечатка. У вас есть ссылки в поддержку этого метода? так что я знаю, где искать в следующий раз?
это навыки алгоритма, вы должны понимать% для примера выше. посмотри на это: w3schools.com/js/js_arithmetic.asp
Спасибо за это, я добавил это, но я получал сообщение об ошибке «Не могу прочитать свойство 'name' of undefined». Я изменил «var i = this, state.cnt ++;» на "var i = response.data.length.cnt ++;" но затем появляется ошибка Cannot create property 'cnt' on number '5' Причина этого в том, что объект имеет 5 значений, но он считает от 0 до 4, а не от 1 до 5