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

我不知道为什么这些是相关的，或者为什么一个会破坏另一个。我花了一段时间才弄清楚其中一个是另一个坏掉的原因。

我尝试了很多东西。包括以几种不同的方式绑定我的函数 _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
    });