从内部回调函数中调用React本机中的This.setState()

Question

我是新手反应本机，并试图将XML解析为flatlist，然后将其保存到状态对象。为了解析XML，我正在使用React-Native-XML2JS和简单的函数，即固定。Parsestring具有回调函数，我正在尝试在该回调功能中使用SetState功能。但是，"这个"在回调中不确定，当我尝试将"此"作为另一个变量（在这种情况下为" self"）时，它仍然不确定。我在这里做错了什么？

export default class PostList extends Component<{}> 
{
   constructor(props) {
      super(props);
      this._executeQuery('https://website.com/xml-feed/');
      this.state = {
        resultsLoaded: false,
        results: false,
      };
    };
  _keyExtractor = (item, index) => index;
  _renderItem = ({item, index}) => (
      <ListItem
        item={item}
        index={index}
        onPressItem={this._onPressItem}
      />
    );
    _renderList = (response) => {
        return <FlatList
        data={response.rss.channel[0].item}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />;
    };
    _handleResponse = (response) => {
        var parseString = require('react-native-xml2js').parseString;
        var self = this;
        this.setState({ resultsLoaded: true });
        parseString(response, function (err, result, self) {
            console.log(self);
            self.setState({ resultsLoaded: true, results: self._renderList(result) });
        });
    };
    _executeQuery = (query) => {
      fetch(query)
          .then(response => response.text())
          .then(str => this._handleResponse(str))
          .catch(error =>
             console.log('ERROR: '+error)
         );
    };
  render() {
    const results = this.state.resultsLoaded ?
        this.state.results : null;
    const loading = !this.state.resultsLoaded ?
            (<View><Text style={styles.description}>
          Loading Blog Posts
        </Text>
        <ActivityIndicator size='large'/></View>) : null;
            console.log(this.state.resultsLoaded);
    return (
      <View style={styles.container}>
        {loading}
        {results}
      </View>
    );
  };
}

Answer 1

从回调函数中删除 self参数：

_handleResponse = (response) => {
    var parseString = require('react-native-xml2js').parseString;
    var self = this;
    this.setState({ resultsLoaded: true });
    parseString(response, function (err, result) {
        console.log(self);
        self.setState({ resultsLoaded: true, results: self._renderList(result) });
    });
};

将self作为参数始终返回undefined

另一个选项是使用回调函数绑定this：

parseString(response, function (err, result) {
  console.log(this);
  self.setState({ resultsLoaded: true, results: self._renderList(result) });
}.bind(this));

最后，您可以使用ES6箭头功能：

parseString(response, (err, result) => {
  console.log(this);
  self.setState({ resultsLoaded: true, results: self._renderList(result) });
});

Answer 2

您可以通过删除箭头，直接声明函数来访问this：

_handleResponse(response) {
    var parseString = require('react-native-xml2js').parseString;
    var self = this;
    this.setState({ resultsLoaded: true });
    parseString(response, function (err, result, self) {
        console.log(self);
        self.setState({ resultsLoaded: true, results: self._renderList(result) });
    });
};

有一个有关箭头功能的详细答案。