SetState не работает на OnChange

Question

Работает, чтобы получить ползунок, чтобы изменить значение «текст» в состоянии React.

Держите получаю ошибку:

"App.js: 90 неперехваченным TypeError: this.setState не является функцией", несмотря на все мои усилия по устранению неисправностей.

В чем может быть проблема?

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:''}}; 
    } 

    componentDidMount() { 
     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> 

Answer 1

вам нужно, чтобы связать handleChange методу

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

Answer 2

Вы должны связать свое состояние обратного вызова в setTimeout, так как вы находитесь в другом контексте. Я верю, это будет делать трюк:

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

Answer 3

Ответ довольно прост: Вы смотрите на неправильном this.

Поскольку вы пишете обратный вызов в закрытии, важно знать, что вы не можете получить доступ к this снаружи. Он всегда относится к текущему контексту.

В качестве обходного пути, определить свою собственную переменную (обычно называемый self) для использования внутри затвора:

componentDidMount() { 
    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) ; 
}