我如何获取元素的当前状态以响应渲染进度条？

Question

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;
};

我具有上述用于处理百分比状态的功能，但是即使对象的状态（例如，电话不为null）也无法提供正确的状态。我用控制台日志检查了电话状态，但它是空的。

贝勒，我称之为百分比对象。我用过“反应甜美的进步”

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

Answer 1

您应该在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，它将返回错误的数据。

[请添加组件的完整逻辑，以更多地了解如何执行所需的操作。