как реализовать setTimeInterval в React? - PullRequest
Новая
       17

как реализовать setTimeInterval в React?

0 голосов
/ 11 января 2020

Я новичок в реакции, я пытаюсь написать компонент реакции, компонент имеет несколько функций. 1. пользователь может ввести случайное число, тогда число будет отображаться на странице тоже. 2. реализуйте кнопку с текстовым значением «пуск», после нажатия на кнопку отображаемое числовое значение будет отображать минус один раз в секунду, а текстовое значение станет «стоп». 3. Продолжайте нажимать кнопку, минус один остановится, и текстовое значение кнопки вернется к «Пуск». 4. когда вычитание числа в 0 автоматически остановится.

сейчас я нахожусь во второй функции для реализации setTimeInterval. Я реализовал ввод, но когда я нажимаю кнопку «Пуск», отображаемое число должно вычитать 1 каждые 1 секунду. но тогда возникает ошибка.

также может кто-нибудь подсказать мне, как реализовать, когда я нажимаю кнопку и затем изменяю текстовое значение с «start» на «stop»? 

TypeError: Cannot read property 'id' of undefined
(anonymous function)
src/App.js:40
  37 | <div>
  38 |   {this.state.details.map(detail => {
  39 |     return (
> 40 |       <div key={detail.id}>
     | ^  41 |         Number:{detail.number}
  42 |         <input
  43 |           type="number"

Вот мой код. 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: [{ id: 1, number: "" }],
      type: "start"
    };
  }
  changeNumber = (e, target) => {
    this.setState({
      details: this.state.details.map(detail => {
        if (detail.id === target.id) {
          detail.number = e.target.value;
        }
        return detail;
      })
    });
  };

  handleClick = () => {
    this.timer = setInterval(
      () =>
        this.setState({
          details: this.state.details.map(detail => {
            detail.number = parseInt(detail.number) - 1;
          })
        }),
      1000
    );
  };

  render() {
    return (
      <div>
        {this.state.details.map(detail => {
          return (
            <div key={detail.id}>
              Number:{detail.number}
              <input
                type="number"
                onChange={e => this.changeNumber(e, detail)}
                value={detail.number}
              />
              <button onClick={() => this.handleClick()}>
                {this.state.type}
              </button>
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 11 января 2020

В функции handleClick вы хотели бы использовать prevState, поскольку у вас есть доступ к prevState из вашего вызова setState. 

enter code herehandleClick = () => {
this.timer = setInterval(
  () =>
    this.setState(prevState => {
      details: prevState.details.map(detail => {
        console.log('detail', detail);
        detail.number = parseInt(detail.number) - 1;
      });
    }),
  1000
);};

Теперь он должен работать как шарм.

...