React 中 setState 处理程序的问题答案

【问题标题】：Problems with setState Handlers in ReactReact 中 setState 处理程序的问题
【发布时间】：2017-11-10 07:26:45
【问题描述】：

我只是试图通过反应中的处理程序改变我的组件的状态，但在执行函数的那一刻，状态并没有改变。这里有处理程序、状态、setStates 和我将处理程序作为属性发送的组件

顺便说一句：我正在使用带有 babel loader 的 webpack

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://fmkadmapgoofadopljbjfkapdkoienihi/build/backend.js:8730:49) at walkNode (chrome-extension:// fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8576:57) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 at Array.forEach (native) at walkNode (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/ backend.js:8578:20) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 at Array.forEach (native) at walkNode (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js: 8578:20) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 at Array.forEach (native)

【问题讨论】：

setState 是一个接受新状态作为参数的函数。 this.setState({ pause: "block" })
请把西班牙语换成英语

标签： javascript google-chrome reactjs babeljs

【解决方案1】：

您可以更改this.setState({ pause: "none" }) 瞬间的this.setState={ pause: "none" } 和其他状态

阅读文档额外信息：Reactjs doc state modify

【讨论】：

【解决方案2】：

您无法将状态更新为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'));

Here is the fiddle.

【讨论】：