setState мешает привязке функции

Question

У меня есть рабочий кусок кода. На экране отображается 5 звезд, и вы можете щелкнуть по ним, чтобы изменить свой рейтинг продукта. Код, размещенный ниже, работает.

Однако, как только я вставляю функцию "this.loadInitialState()" в мой componentWillMount, она ломается и выдает ошибку, которая, по-видимому, связана с привязкой другой функции _onRate().

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

Я не знаю, почему они связаны, или почему одно ломает другое. И мне потребовалось некоторое время, чтобы выяснить, почему одна из них сломалась.

Я перепробовал много вещей. Включая привязку моей функции _onRate несколькими различными способами, но все они не решают мою проблему:

1.) используйте функцию жирной стрелки в onPress, например:

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

2.) не используйте жирную стрелку, но связывайте в каждом onPress, например:

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

3.) связать в конструкторе, например:

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

Не могли бы вы подумать, как я могу продолжить исследовать это?

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

В вашем _loadInitialState вы конвертируете setState к объекту,

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

Вы определенно не должны этого делать. Я думаю, ты пытался сделать,

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