我只是想通过响应中的处理程序更改我的组件的状态,但在执行函数时状态不会改变。这里有处理程序、状态、setStates 和我将处理程序作为属性发送的组件
顺便说一句:我正在使用 webpack 和 babel loader
export default class Game extends React.Component{
constructor(){
super()
this.state={
pause: null
}
}
PauseShow(){
this.setState={ pause: "block" }
console.log("pauseshow")
}
PauseHide(){
this.setState={ pause: "none" }
console.log("pausehide")
}
render(){
return(
<div className="big-box">
<Player idc="Game" src="assets/Fly_Me_to_the_Aegis_Seven_Moon.mp3"/>
<GameOutput/>
<GameData pauseMethod={this.PauseShow.bind(this)}/>
<GameInput />
<GamePause display={this.state.pause} pauseMethod={this.PauseHide.bind(this)}/>
</div>
)
}
} Aquí llamo al un handler que pasé por props
export default class GameData extends React.Component{
constructor(){
super()
}
render(){
return(
<div id="GameData">
<button onClick={this.props.pauseMethod}>pause</button>
</div>
)
}
} 这里我们在单击使处理程序执行的按钮时在控制台显示错误
backend.js:8730 Uncaught TypeError: inst.setState.bind is not a function at getData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8730:49) 在 walkNode (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8576:57) 在 chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 在 Array.forEach (native) 在 walkNode (chrome-extension://fmkadmapgofadopljbjfkapd/buildkoienihi/build backend.js:8578:20) 在 chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 在 Array.forEach (native) 在 walkNode (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js: 8578:20) 在 chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 在 Array.forEach (native)
最佳答案
你不能将你的状态更新为 this.setState{pause: "block"}
。您的状态是一个函数,您需要将一个对象作为参数传递给它。因此:
this.setState({pause: "block"})
是更新状态的正确方法。
查看这段代码:
class Test extends React.Component {
constructor(){
super();
this.state = {
text: ""
}
}
pauseMethod(){
this.setState({text: "paused"}, () => console.log(this.state.text))
}
render(){
return (
<div><GameData pauseMethod={this.pauseMethod.bind(this)} /></div>
)
}
}
class GameData extends React.Component{
render(){
return(
<div id="GameData">
<button onClick={this.props.pauseMethod}>pause</button>
</div>
)
}
}
React.render(<Test />, document.getElementById('container'));
关于javascript - React 中 setState 处理程序的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44438117/