最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - SetState Is Not A Function on OnChange - Stack Overflow

programmeradmin2浏览0评论

Working to get a slider to change the value of "text" in the React state.

Keep getting an error:

"App.js:90 Uncaught TypeError: this.setState is not a function" despite my best troubleshooting efforts.

What could the fix be?

  class App extends Component {
  constructor(props) {
      super(props);
      this.state = {list: [{x: "Before Pool", y:85000}, {x: "After Pool", y:82000}], text: 0, options: {bathrooms:'', bedrooms:'', sqft:''}};
    }

  ponentDidMount() {
        setTimeout(() => {
         this.setState({list: [{x: "Before Pool", y:60000}, {x: "After Pool", y:30000}]});
         console.log("testing", this.state.text);
       }, 2000) ;
  }
  handleChange (event) {
    console.log("from handle change", event);
   this.setState({text : event });
  }
  render() {
    return (
      <div className="App">
          <div>
             <div style={wrapperStyle}>
               <p># of Bathrooms</p>
               <Slider min={0} max={20} defaultValue={3} onChange={this.handleChange} />
             </div>

Working to get a slider to change the value of "text" in the React state.

Keep getting an error:

"App.js:90 Uncaught TypeError: this.setState is not a function" despite my best troubleshooting efforts.

What could the fix be?

  class App extends Component {
  constructor(props) {
      super(props);
      this.state = {list: [{x: "Before Pool", y:85000}, {x: "After Pool", y:82000}], text: 0, options: {bathrooms:'', bedrooms:'', sqft:''}};
    }

  ponentDidMount() {
        setTimeout(() => {
         this.setState({list: [{x: "Before Pool", y:60000}, {x: "After Pool", y:30000}]});
         console.log("testing", this.state.text);
       }, 2000) ;
  }
  handleChange (event) {
    console.log("from handle change", event);
   this.setState({text : event });
  }
  render() {
    return (
      <div className="App">
          <div>
             <div style={wrapperStyle}>
               <p># of Bathrooms</p>
               <Slider min={0} max={20} defaultValue={3} onChange={this.handleChange} />
             </div>

Share Improve this question asked Aug 28, 2016 at 5:46 realsimonburnsrealsimonburns 1051 silver badge11 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

you need to bind the handleChange method

<Slider min={0} max={20} defaultValue={3} onChange={this.handleChange.bind(this)}

You need to bind your state to the callback within setTimeout since you are in a different context. I belive this would do the trick:

setTimeout(() => {
 this.setState({list: [{x: "Before Pool", y:60000}, {x: "After Pool", y:30000}]});
 console.log("testing", this.state.text);
   }.bind(this), 2000) ;

The answer is pretty simple: You're looking at the wrong this.

Since you're writing a callback in a closure it's important to know that you can't access the this from outside. It always refers to the current context.

As a workaround, define your own variable (typically called self) to use inside the closure:

ponentDidMount() {
    var self = this; // copy the reference
    setTimeout(() => {
        self.setState({list: [{x: "Before Pool", y:60000}, {x: "After Pool", y:30000}]});
        console.log("testing", this.state.text);
    }, 2000) ;
}

You need to bind the handleChangemethod here

<Slider min={0} max={20} defaultValue={3} onChange={this.handleChange} />

This should look like this

<Slider min={0} max={20} defaultValue={3} onChange={this.handleChange.bind(this)} />

Or you can simply use Arrow Functions in the signature of the method, is better to use this all the time to save you to bind all the time. It should look like this:

handleChange = event => {
    console.log("from handle change", event);
    this.setState({text : event });
  }
发布评论

评论列表(0)

  1. 暂无评论