setState interferes with binding a function

Question

I have a working piece of code. It shows 5 stars on the screen, and you can click on them to change your rating of a product. The code posted below works.

However, once I insert the "this.loadInitialState()" function in my componentWillMount, it breaks, and gives an error that seems to be related to the binding of another function _onRate().

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

I don't know why these are related, or why one breaks the other. And it took me a while to figure out one was the reason the other broke.

I tried many things. Including binding my function _onRate in several different ways, but those all don't fix my issue:

1.) use the fat arrow function in onPress, e.g.:

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

2.) don't use fat arrow, but bind in each onPress, e.g.:

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

3.) bind in constructor, e.g.:

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

Would you have any thoughts on how I can proceed to explore 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

in your _loadInitialState you are converting setState to an object,

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

You definitely shouldn't do that. I guess you were trying to do,

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