SetState和React-Native生命周期

Question

我正在使用React-Native迈出第一步。我不明白为什么使用以下代码在_refreshData（console.log（this.state.data）;）中得到值class SimpleList extends Component { constructor(props) { super(props); console.log("Inside constructor"); this.state = { data: [] }; } componentDidMount() { console.log("Inside componentDidMount"); this._refreshData(); }

我从 Learning Native Native 书中获得了这段代码：

_refreshData = () => {
 console.log("Inside_refreshData");
 console.log(NYT.fetchBooks());         
 NYT.fetchBooks().then(books => {
  this.setState({ data: this._addKeysToBooks(books) });
 });
 console.log("This is data: ");
 console.log(this.state.data);
};



function fetchBooks(list_name = "hardcover-fiction") {
 console.log("Inside fetchBooks");
 let url = `${API_STEM}/${LIST_NAME}?response-format=json&api- 
 key=${API_KEY}`;
 return fetch(url)
  .then(response => response.json())
  .then(responseJson => {
   return responseJson.results.books;
 })
.catch(error => {
  console.error(error);
});
}

...

setState

调试（使用console.log），即使我刚刚调用了{{1}}，我仍然看到“ data” = []，并且从日志中我看到提取操作返回了我的值... 这是通话记录：

你能解释为什么吗？ 预先感谢。

Answer 1

好吧，首先是保证和异步，并且不能保证在记录数据时也会收到数据，因此当您进入componentDidMount并调用console.log(this.state.data);时，可能不会返回数据然而。认为从api返回数据花费了2000毫秒。所以你打电话

NYT.fetchBooks().then(books => {
   this.setState({ data: this._addKeysToBooks(books) });
});

然后我说的这段代码花费了2000毫秒，但是正如我说的那样，您立即记录数据，因为此时未填充数据，您看到的是空数组。但是，如果您想查看数据，则可以记录在这里：

NYT.fetchBooks().then(books => {
 console.log(books);
   this.setState({ data: this._addKeysToBooks(books) });
 });