Передача обновления состояния Dynami c в дочернем компоненте в родительский компонент - PullRequest
Новая
       10

Передача обновления состояния Dynami c в дочернем компоненте в родительский компонент

0 голосов
/ 04 апреля 2020

Контекст: я создаю приложение таймера, и у меня есть два компонента: приложение. js (родительский) и конфигурация. js (дочерний).

Я хочу получить состояние в конфигурации . js, который изначально установлен как timerSecond: this.props.timerSecond (извлекается из приложения. js через реквизиты) и обновляет то же состояние в родительском компоненте , как оно обновляется в дочернем компоненте.

Вот сегмент моего приложения. js: 

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      breakLength: 5,
      sessionLength: 25,
      timerMinute: 25,
      timerSecond: 0,
      isPlay: false
    }

И моя конфигурация. js: 

class Configuration extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isSession: true,
            timerSecond: this.props.timerSecond,
            intervalId: 0
        };

        this.playTimer = this.playTimer.bind(this);
        this.decreaseTimer = this.decreaseTimer.bind(this);
    }

        // PLAY
        playTimer() {
            let intervalId = setInterval(this.decreaseTimer, 1000);
            this.props.onPlayStopTimer(true);
            this.setState({
                intervalId: intervalId
            })
        }

        // Decrease seconds
        decreaseTimer() {
            switch(this.state.timerSecond) {
                case 0:
                    if(this.props.timerMinute === 0) {
                        if(this.state.isSession) {
                            this.setState({
                                isSession: false
                            });
                            this.props.toggleInterval(this.state.isSession);
                        } else {
                            this.setState({
                                isSession: true
                            });
                            this.props.toggleInterval(this.state.isSession);
                        }
                    } else {
                        this.props.updateTimerMinute()
                        this.setState({
                            timerSecond: 59
                        })
                    }
                    break;
                default:
                    this.setState((prevState) => {
                        return {
                            timerSecond: prevState.timerSecond - 1,
                        }
                    })
                    break;
            }
        }

По существу - каждый раз, когда секунды увеличиваются уменьшившись с 59, состояние timerSecond успешно изменяется в Configuration. js, но я не уверен, как выполнить pu sh для этого обновления на родительском уровне (приложение. js). Мне нужно, чтобы он динамически обновлялся в приложении. js, потому что у меня есть другой компонент, извлекающий из того же состояния (timerSecond) и отображающий отметку таймера на странице.

Я читал о методах жизненного цикла, таких как componentDidUpdate (), но я не уверен, как использовать это в этом контексте? Каждый раз, когда я пытаюсь, я получаю бесконечное сообщение об ошибке l oop. Я также сталкивался с этим кодом 

componentDidUpdate(prevProps, prevState){
if(prevState.searchTerm !== this.state.searchTerm) {
   this.props.onSearchChange(this.state.searchTerm)
  }
}

на этой публикации , но я не уверен, что это поможет / применимо к динамическому c аспекту моего приложения таймера?

1 Ответ

0 голосов
/ 05 апреля 2020

все, что вам нужно, - это передать функцию из приложения. js в конфигурацию. js

App extends React.Component {
constructor() {
    super();
    this.state = {
        breakLength: 5,
        sessionLength: 25,
        timerMinute: 25,
        timerSecond: 0,
        isPlay: false
    }
}
render() {
    const updateState = (newState) => {
        this.setState({
            ...this.state,
            newState
        })
    }

    return(
        <Configuration {...this.state} updateState={updateState}/>
    )
}
}

теперь функция updateState передается как значение, равное Configuration.js

...