Javascript React-设置状态errir-can'；在状态转换期间更新

当调用此组件时，我得到以下错误

设置状态（…）：无法在现有状态转换期间更新（例如 在

渲染

或其他组件的构造函数中）。渲染方法 应该是纯粹的道具和状态功能；副作用 是反模式，但可以移动到

组件willmount

这似乎是因为

{this.renderCurrentAthlete（）}

在渲染内部。当我调用

renderCurrentAthlete

时，我试图通过运行

this.setState（{currentAthleteData.Athlete}）

让州政府知道当前运动员是谁，但它会导致错误。有没有关于如何正确处理的建议？此外，任何关于该组件的其他建议也将非常棒！了解所有信息是一个很大的帮助：）

类迷你游戏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
分数：0，
当前运动员：空
}
}
游戏数据=[
{运动员：“佩顿·曼宁”，Img：“someURL”}，
{运动员：“托尼·霍克”，Img：“某某”}，
{运动员：“Tomy Brady”，Img：“someURL”}，
{运动员：“乌塞恩·博尔特”，Img：“某某”}
]
renderGameButtons（）{
返回(
{this.gameData.map（（x）=>{
返回(
这个.answerHandler（x.atternate）}>{x.atternate}
) 
})}
)
}
renderCurrentAthlete（）{
const currentAthleteData=this.gameData[Math.floor（Math.random（）*4）]；
//console.log（currentAthleteData）；
const imgUrl=currentAthleteData.Img；
const athleteName=currentAthleteData.Athleter；
log（imgUrl，athleteName）；
//console.log（当前运动员）；
this.setState（{currentAthleteData.Athlete}）；
返回(
)
}
回答者（回答）{
//控制台日志（a）
//console.log（this.state.currentAthleter）
如果（答案===this.state.currentAthletor）{
this.setState（{score:this.state.score+10}）
console.log（this.state.score）；
}
}
render（）{
返回(
{this.renderCurrentAthlete（）}
在下面选择您的答案
{this.renderGameButtons（）}
)
}
}

添加方法组件将装载此代码并从renderCurrentAthlete中删除。方法componentWillMount将在呈现之前调用。看更多

---

为什么要为currentAthleter设置状态，我看不到您使用它。它似乎不喜欢渲染块中的状态转换，因为React会通过状态自动更新DOM，而在渲染中设置状态可能不是一件好事。也许可以尝试将这个.renderCurrentAthlete取出，放入一个react生命周期方法，如componentDidMount（）或它建议的方法，然后从该生命周期方法调用这个.renderCurrentAthlete（）？谢谢，我昨晚看了看，没有什么意义，但我今天早上回来看到了你的反应，让它起作用了哈哈。我打算把东西清理一下，但这就是我最终让它工作的原因。

class MiniGame extends Component {
  constructor(props){
    super(props);
    this.state = {
        score: 0,
        currentAthlete: null
    }
  }

gameData = [
        {Athlete: "Peyton Manning", Img: "someURL"},
        {Athlete: "Tony Hawk", Img: "someURL"},
        {Athlete: "Tomy Brady", Img: "someURL"},
        {Athlete: "Usain Bolt", Img: "someURL"}
]

renderGameButtons() {
    return(
        <div>
            {this.gameData.map((x) => { 
                return(
                    <div key={x.Athlete}>
                        <button className="btn btn-outline-primary" onClick={ () => this.answerHandler(x.Athlete)}> {x.Athlete} </button>
                    </div>
                ) 
            })}
        </div>
    )
}

renderCurrentAthlete() {
    const currentAthleteData = this.gameData[Math.floor(Math.random() * 4)];
    //console.log(currentAthleteData);
    const imgUrl = currentAthleteData.Img;
    const athleteName = currentAthleteData.Athlete;
    console.log(imgUrl, athleteName);
    //console.log(currentAthlete);
    this.setState({ currentAthlete: currentAthleteData.Athlete });
    return(
        <img className="card-img-top imgCard" src={imgUrl} alt="..."></img>
    )
}

answerHandler(answer){
    // console.log(a)
    // console.log(this.state.currentAthlete)
    if(answer === this.state.currentAthlete) {
        this.setState({score: this.state.score + 10})
        console.log(this.state.score);
    }
}

render(){
    return(
        <div className="miniGameContainer">
            <div className="card card-outline-info  mb-3">
                { this.renderCurrentAthlete() }
                <div className="card-block">
                    <p className="card-text">Pick your Answer Below</p>
                        { this.renderGameButtons() }
                </div>
            </div>
        </div>
    )
  }
}

componentWillMount() {
 const currentAthleteData = this.gameData[Math.floor(Math.random() * 4)];
    //console.log(currentAthleteData);
    const imgUrl = currentAthleteData.Img;
    const athleteName = currentAthleteData.Athlete;
    console.log(imgUrl, athleteName);
    //console.log(currentAthlete);
    this.setState({ currentAthlete: currentAthleteData.Athlete });
}