Question

我是React Native的新手，我正在尝试将XML解析为FlatList，然后将其保存到State对象。为了解析XML，我使用的是react-native-xml2js和简单函数parseString。 parseString有一个回调函数，我试图在该回调函数中使用setState函数。然而，＆＃34;这个＆＃34;在回调中未定义，当我尝试传递＆＃34;这个＆＃34;作为一个不同的变量（在这种情况下，＆＃34; self＆＃34;），它仍然是未定义的。我在这里做错了什么？

verbose, normal, concise, and silent

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 Arrow功能：

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) });
    });
};

有关Arrow Function and this的详细解答。

从内部回调函数调用React Native中的this.setState（）

2 个答案: