setStateは関数のバインディングに干渉します

Question

私は動作するコードを持っています。画面に5つの星が表示され、商品の評価を変更するためにそれらをクリックすることができます。以下のコードは動作します。

しかし、一度私のcomponentWillMountに "this.loadInitialState（）"関数を挿入すると、ブレークし、別の関数_onRate（）のバインドに関連しているように見えるエラーが返されます。

"this.setState is not a function. In this.setState({i_warn: nr }). 
This.setstate is an instance of Object 

私はなぜこれらが関連しているのか、なぜ他の人が壊れているのか分かりません。そして、もう一つが壊れた理由があることを理解するまでにはしばらく時間がかかりました。

私は多くのことを試しました。

1）例えば、たonPressに脂肪矢印機能を使用します：いくつかの異なる方法で私の関数_onRate結合が、それらはすべて私の問題を解決していないことを含む）

onPress={()=>this._onRate('safe', 0+1)} 

2.ありません例えば、脂肪の矢印を使用しますが、各たonPressにバインド：

onPress={this._onRate.bind(this, 'safe', 0+1)} 

3）をバインドするコンストラクタで、例えば：

constructor { this._onRate = this._onRate.bind(this) 

臥あなたが私がこれを探検するためにどのように進めることができるかについて、あなたはどんな考えを持っていますか？あなたの_loadInitialStateあなたは間違いなくそれを行うべきではありません

​​

、オブジェクトにsetStateを変換している。中

class MyReview extends React.Component{ 
constructor(props) { 
    super(props); 
    const { params } = this.props.navigation.state; 
    this.state = { 
    // general ID info 
    barcode: params.productdata.barcode, 
    userID: params.user.ID, 
    username: params.user.name, 
    // rating inputs 
    i_safe: null, 
    i_warn: null, 
    // comment inputs 
    i_comment: '' 
    }; 
    //this._loadInitialState = this._loadInitialState.bind(this); 
    //this._onRate = this._onRate.bind(this); 
} 

componentWillMount() { 
    //this._loadInitialState(); 
} 

_loadInitialState() { 
    if (this.props.review) { 
    this.setState = { 
     // rating inputs 
     i_safe: this.props.review.saferating, 
     i_warn: this.props.review.warnrating, 
     // comment inputs 
     i_comment: this.props.review.comment 
    }; 
    } 
} // end _loadInitialState 

// UPDATE STATE AS COMMENT TEXT CHANGES 
_onCommentChanged = (txt) => { 
    this.setState({ i_comment: txt }); 
} 

// IF RATING CHANGED 
_onRate(rateType, nr) { 
    console.log('RATE BUTTON PRESSED'); 
    console.log('number passed to _onrate is: ',nr) 
    if (rateType==='warn') { this.setState({ i_warn: nr }); } 
    else if (rateType==='safe') this.setState({ i_safe: nr }); 
} 

render() { 
    const { params } = this.props.navigation.state; 

    // CONSTRUCT WARNING RATINGS 
    var warningRating = [0, 0, 0, 0, 0]; 
    for (var i=0;i<5;i++) { 
    if (Math.round(this.state.i_warn)>=(i+1)) { warningRating[i]=1; } 
    } 

    var warningIcons = (
    <View style={localStyle.w_ratingicons}> 
     <TouchableOpacity key={-1} onPress={()=>this._onRate('warn', 0)}> 
     <Image style={localStyle.warningIcon} key={-1} source={require('../images/x2.png')}/> 
     </TouchableOpacity> 
     <TouchableOpacity key={0} onPress={()=>this._onRate('warn', 0+1)}> 
     <Image style={localStyle.warningIcon} key={0} source={warningRating[0] ? require('../images/warning.png') : require('../images/warning_fade.png')}/> 
     </TouchableOpacity> 
     <TouchableOpacity key={1} onPress={()=>this._onRate('warn', 1+1)}> 
     <Image style={localStyle.warningIcon} key={1} source={warningRating[1] ? require('../images/warning.png') : require('../images/warning_fade.png')}/> 
     </TouchableOpacity> 
     <TouchableOpacity key={2} onPress={()=>this._onRate('warn', 2+1)}> 
     <Image style={localStyle.warningIcon} key={2} source={warningRating[2] ? require('../images/warning.png') : require('../images/warning_fade.png')}/> 
     </TouchableOpacity> 
     <TouchableOpacity key={3} onPress={()=>this._onRate('warn', 3+1)}> 
     <Image style={localStyle.warningIcon} key={3} source={warningRating[3] ? require('../images/warning.png') : require('../images/warning_fade.png')}/> 
     </TouchableOpacity> 
     <TouchableOpacity key={4} onPress={()=>this._onRate('warn', 4+1)}> 
     <Image style={localStyle.warningIcon} key={4} source={warningRating[4] ? require('../images/warning.png') : require('../images/warning_fade.png')}/> 
     </TouchableOpacity> 
    </View> 
); 

    // OUTPUT TO SCREEN 
    return (
    <View> 
     {warningIcons} 
    </View> 
); 
} // end render 
} // end component 

Answer 1

あなたがやろうとしていたと思います。

this.setState({ 
     // rating inputs 
     i_safe: this.props.review.saferating, 
     i_warn: this.props.review.warnrating, 
     // comment inputs 
     i_comment: this.props.review.comment 
    });