React中setState處理程序的問題

Question

我只是試圖通過處理程序更改我的組件的狀態，但在執行函數時，狀態不會改變。 在這里，您有處理程序，狀態，setStates以及我將處理程序作為屬性發送的組件

順便說一句：我正在使用帶有babel裝載機的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íllamoal un handlerquepaséporprops

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不是walkNode中的getData函數（chrome-extension：//fmkadmapgofadopljbjfkapdkoienihi/build/backend.js：8730：49）（chrome-extension：// fmkadmapgofadopljbjfkapdkoienihi / build /backend.js:8576:57）在chrome-extension：//fmkadmapgofadopljbjfkapdkoienihi/build/backend.js：8579：15 at array.forEach（native）at walkNode（chrome-extension：//fmkadmapgofadopljbjfkapdkoienihi/build/backend.js ：8578：20）在chrome-extension：//fmkadmapgofadopljbjfkapdkoienihi/build/backend.js：8579：15 at array.forEach（native）at walkNode（chrome-extension：//fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8578:20 ）在chrome-extension：//fmkadmapgofadopljbjfkapdkoienihi/build/backend.js：8579：15 at Array.forEach（native）

Answer 1

您無法將狀態更新為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'));

這是小提琴。

Answer 2

你可以改變this.setState({ pause: "none" }) this.setState={ pause: "none" } of this.setState={ pause: "none" }和其他狀態

閱讀doc額外信息： Reactjs doc state modify