Я новичок в реакции и пытаюсь реализовать динамический c таймер, встроенный в другой компонент.
Это мой компонент Timer:
class Timer extends Component{
constructor(props) {
super(props);
this.state = {
seconds: this.props.seconds
};
}
async componentDidMount() {
this.myInterval = setInterval(() => {
const{seconds} = this.state;
if (seconds > 0) {
this.setState(({seconds}) => ({
seconds: seconds - 1
}))
}
if (seconds === 0) {
clearInterval(this.myInterval)
}
}, 1000)
}
async componentWillUnmount() {
clearInterval(this.myInterval)
}
render() {
const {seconds} = this.state;
return (
<div>
{seconds === 0
? <Message> Times up! </Message>
: <Seconds> {seconds < 10 ? `0${seconds}` : `${seconds}`} </Seconds>
}
</div>
);
}
}
И вот как таймер встроен в мой другой компонент:
render() {
// this construction of the variable name for the different timer seconds helps us to render the timer dynamically
let t = {};
let a = 1;
let b = 2;
let c = 3;
let d = 4;
t['timer' + a] = 15;
t['timer' + b] = 30;
t['timer' + c] = 30;
t['timer' + d] = 20;
return (
<div>
<TimerContainer>
<Round> Round {this.state.round} </Round>
<Timer seconds={t['timer' + this.state.phaseNumber]}/>
</TimerContainer>
</div>
)
}
Я реализовал метод, который надежно изменяет this.state.phaseNumber в компоненте, в который встроен таймер (например, от 1 до 2), и я подумал это вызовет изменение состояния в Timer, так как this.state.phaseNumber определяет this.state.seconds в Timer. Где я ошибся в своих рассуждениях?
РЕДАКТИРОВАТЬ: Я думаю, что я решил проблему. Все, что я сделал, это вынул метод clearInterval () из условия 0 секунд. После этого таймер работал так, как я хотел.