problem description
implement an upgraded game. After the first inning ends, the component tells the parent component to upgrade + 1, and after the second inning ends, notify the parent component to upgrade + 1
.the environmental background of the problems and what methods you have tried
the following is how I refer to Ali"s implementation. In componentdidmount, a child component can indeed pass a value to the parent component, but after the end of the first inning, it can be the second inning, but not the third inning. If I put the function in update, the component will be refreshed one by one. Finally, ask how to solve
Link description -sharp-sharp-sharp
/ / Please paste the code text below (do not replace the code with pictures)
//
setLevel(level){
console.log("setLvel",level)
this.setState({
level
})
console.log("new setLvel",level)
}
render(){
console.log("level parent ",this.state.level)
if(this.state.level===1){
var _urls = urls.slice(0,4);
randomUrls = this.spreadImg(_urls)
}
if(this.state.level===2){
_urls = urls.slice(0,6);
randomUrls = this.spreadImg(_urls);
}
if(this.state.level===3){
_urls = urls.slice(0,8);
randomUrls = this.spreadImg(_urls);
}
var bgStyle = {
backgroundImage: `url(${bg})`,
width:"100%",
height:"100vh",
backgroundSize:"contain"
};
return (
<div style={bgStyle}>
<section className="stage">
<section>
<ImgFigureSection
setLevel = { level => this.setLevel(level) }
level={this.state.level}
randomUrls = {randomUrls} />
</section>
</section>
</div>
)
}
componentDidMount(){
console.log("didmount",this.state)
if(this.state.level===1){
setTimeout(()=>{
this.props.setLevel(2)
},10000)
}else if(this.state===2){
setTimeout(()=>{
this.props.setLevel(3)
},10000)
}
}
what result do you expect? What is the error message actually seen?
among the child components, I don"t want to use setTimeout,. I want level+1, so tell the parent component to update
.