Как я могу получить текущее состояние элемента в реакции на рендеринг индикатора выполнения? - PullRequest
Новая
       55

Как я могу получить текущее состояние элемента в реакции на рендеринг индикатора выполнения?

0 голосов
/ 30 января 2020 
handlePercent=()=>{
    if (this.state.phone!=="") {
        this.setState(() => ({
            percent: this.state.percent + 20,
        }));
    } else if(this.state.website!==""){
        this.setState(() => ({
            percent: this.state.percent + 20,
        }));
    }
    return this.state.percent;
};

У меня есть вышеуказанная функция для обработки состояния процента, но даже если состояние объекта, например телефон, не равно нулю, это не дает мне правильное состояние. Я проверил состояние телефона, например, с помощью журнала консоли, и он пуст.

Сильфон там я называю процентным объектом. Я использовал "ответ-сладкий-прогресс" 

 <div className="percent">
        <p>Your profile is {this.state.percent}% complete:</p>
        <Progress percent={this.handlePercent()}/>
 </div>

1 Ответ

1 голос
/ 30 января 2020

Вы должны использовать prevState в setState вместо использования this.state

handlePercent = () => {
    if (this.state.phone !== "") {
        this.setState(prevState=> ({
            percent: prevState.percent + 20,
        }))
    } else if(this.state.website!==""){
        this.setState(prevState=> ({
            percent: prevState.percent + 20,
        }))
    }
    // don't return state
}

И передать this.state.percent на Progress

<Progress percent={this.state.percent}/>

И позвонить handlePercent в каком-то другом месте кода.

Причина don't return state заключается в том, что при вызове this.setState он выполнит повторную визуализацию компонента и сделает this.state.percent правильный процент. Если вы вернете this.state.percent, он вернет неверные данные.

Пожалуйста, добавьте полные логики c компонента, чтобы лучше понять, как делать то, что вы хотите.

...