ReactJS不能讀取undefined的屬性'setState'

Question

使用這個作爲參考，react.js - show a message on and after form submission，我試圖複製類似的東西，但是我在控制檯遇到一個錯誤，「Uncaught TypeError：無法讀取未定義的屬性'setState' 。我無法確定我在狀態組件中丟失了「this」的引用。

import React from 'react' 
import RadarInput from './radarInput' 

class RadarForm extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    onFormSubmit = (data, cb) => { 
    cb(data); 
    } 
    render() { 
    return (
     <div> 
     <RadarInput OnRadarSubmit={this.onFormSubmit.bind(this)} /> 
     </div> 
    ) 
    } 
} 

export default RadarForm 



import React from 'react' 

class RadarInput extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value:"Hello!", message: ''} 
    } 
    handleChange = (evt) => { 
    this.setState({value: evt.target.value }); 
    } 
    sendContent = function(e) { 
    console.log("I'm in content") 
    console.log("this is e: ", this.state.value); 
    e.preventDefault(); 
    var radarNum = this.state.value 
    this.setState({value: '', message: 'Please wait ...'}); 
    this.props.OnRadarSubmit({ 
     value: radarNum 
    }, function(data){ 
     console.log("data in cb ", data.value); 
     this.setState({ message: data.value }); 
    }); 
    } 
    render() { 
    return (
     <div> 
     Title: <div>{this.state.message}</div> 
     <form onSubmit={this.sendContent.bind(this)}> 
      Radar Number: <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} /> 
      <input type="submit" value="Submit" /> 
     </form> 
     </div> 
    ) 
    } 
} 

export default RadarInput 

Answer 1

您需要設置this一個變量您OnRadarSubmit()回調以外的第一。

var self = this; 

this.props.OnRadarSubmit({ value: radarNum}, function(data){ 
    console.log("data in cb ", data.value); 
    self.setState({ message: data.value }); 
}); 

原因是，在回調，this並不是指類範圍內的任何時間較長，因此通過設置self，您明確地使用封閉的範圍。

Further reading。