React native: компонент не перерисовывается при изменении состояния с помощью таймера - PullRequest
Новая
       4

React native: компонент не перерисовывается при изменении состояния с помощью таймера

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

Я новичок, чтобы реагировать на нативные, и сейчас я изучаю основы о Хукс. Я создал очень простой компонент под названием Timer, который имеет три кнопки - Start, Stop и Manual Change counter. Счетчик - это хук useState. Теперь проблема: когда я меняю счетчик, вызывая функцию changeCounterHandler из кнопки, все правильно. Когда я запускаю таймер, я вижу, что он «тикает», но счетчик никогда не изменяется и компонент не перерисовывается. Почему? : -) 

import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, View, Button, Text } from 'react-native';


const Timer = props => {

    const [counter, setCounter] = useState(0);

    const timerId = useRef();
    const timerDidMount = () => {
        console.log("timerDidMount");

    };

    const changeCounterHandler = () => {

        setCounter(counter+1);
        console.log(`counter: ${counter}`);
    };

    const startTimer = () => {
        timerId.current = setInterval(changeCounterHandler,1000);
    };
    const stopTimer = () => {
        clearInterval(timerId.current);
    };
return (

<View>
    <Text>{counter}</Text>
<Button title="Start timer" onPress={startTimer}></Button>
<Button title="Stop timer" onPress={stopTimer}></Button>
<Button title="change counter" onPress={changeCounterHandler}></Button>

</View>
)
};

const styles = StyleSheet.create({

});

export default Timer;

Спасибо, Ян

1 Ответ

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

Посмотрите, работает ли это: используйте формат функции для setCounter: setCounter (counter => counter + 1);

...