React State自動更改爲false而不設置它

Question

我有這種情況，我需要根據其選擇將sortAscending順序設置爲true或false。一旦我嘗試對其進行排序，將狀態更改爲true，並立即變回false。這在延遲加載列表中影響着我。

handleSortRoomsOnClick: function(sortBy) { 
    if(sortBy == this.state.sortBy) { 
     this.setState({ 
      isSortAsc: !this.state.isSortAsc, 
      page: 1 
     }); 
     this.handleFetchRooms(1, sortBy, this.state.isSortAsc); 
    } else { 
     this.setState({ 
      sortBy: sortBy, 
      isSortAsc: true, 
      page: 1 
     }); 
     this.handleFetchRooms(1, sortBy, true); 
    } 
}, 

Answer 1

問題是setState是異步的。您無法設置它，然後立即參考值this.state.isSortAsync。所以，你可以將它保存在下面的變量中，或者在setState中使用回調。

handleSortRoomsOnClick: function(sortBy) { 
    if(sortBy == this.state.sortBy) { 
     const isSortAsc = !this.state.isSortAsc; 
     this.setState({ 
      isSortAsc: isSortAsc, 
      page: 1 
     }); 
     this.handleFetchRooms(1, sortBy, isSortAsc); 
    } else { 
     this.setState({ 
      sortBy: sortBy, 
      isSortAsc: true, 
      page: 1 
     }); 
     this.handleFetchRooms(1, sortBy, true); 
    } 
} 

編輯：我想這可能凝結了一下：

handleSortRoomsOnClick(sortBy) { 
    const isSortAsc = (sortBy === this.state.sortBy) ? !this.state.isSortAsc: true; 
    this.setState({ 
     sortBy, 
     isSortAsc, 
     page: 1 
    }); 
    this.handleFetchRooms(1, sortBy, isSortAsc); 
}