React Native 如何清空数据源

Question

I want to simply delete the dataSource which is present in the state when I switch to a page. Because all previous responses are still present in the state every time I fetch data. Everytime data is appended, but I want start with dataSource when I first open a page.

So, first of all I set dataSource and response in the constructor to null.

constructor(props) {
    super(props);
    this.fetchData = this._fetchData.bind(this); 

    this.state = {
      dataSource: null, 
      response: null,
    };    
  }

This is how I fetch the data via an api and get the response.

_fetchData(callback) {
   ...
   fetch(`http://www.example.com/apifetch.php?etc`)
      .then(response => response.json())
      .then(callback)
      .catch(error => {
        console.error(error);
      });

 }

And in the componentDidMount I'm placing the json response in the state with setState.

 componentDidMount() {

    this.fetchData(responseJson => {            
      let ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
      }); 
      const data = responseJson.results;
        console.log(responseJson);

      this.setState({
        dataSource: ds.cloneWithRows(data),
        isLoading: false,
        _data: data,
        _dataAfter: responseJson.after,
        response: data,
      });
    });

  }

When I render this.state.dataSource it shows the new and all the previous responses. Now what is the best way to delete the dataSource the first time so all the previous data is gone and how can it be done (without using packages like eg Redux)?

UPDATE I am specifically searching for is a way that when a page is re-rendered and a new ListView.DataSource is initialized, the previous DataSource that is stored in the state will be deleted.

Now multiple dataBlobs are stored in the state after every render.

 {"_dataBlob":{"s1":[{"id":"1","key_id":"1","title":"title","image":{"uri":"http://www.example.com/1.jpg"}}]},{"id":"2","key_id":"2","title":"title","image":{"uri":"http://www.example.com/2.jpg"}}]}"_dirtyRows":[[true,true]],"_dirtySections":[false],"_cachedRowCount":2,"rowIdentities":[["0","1"]],"sectionIdentities":["s1"]} 

 {"_dataBlob":{"s1":[{"id":"3","key_id":"3","title":"title","image":{"uri":"http://www.example.com/3.jpg"}}]},{"id":"2","key_id":"2","title":"title","image":{"uri":"http://www.example.com/4.jpg"}}]}"_dirtyRows":[[true,true]],"_dirtySections":[false],"_cachedRowCount":2,"rowIdentities":[["0","1"]],"sectionIdentities":["s1"]} 

This way the performance will decrease when a user continuousely visits different pages. Is there a solution, or is this merely the downside of using ListViews in contrast to eg FlatLists?

Answer 1

what you can do is just set dataSource value to null before you do api call in componentDidMount() like this:

 componentDidMount() {

   //set null value to your dataSource 
        this.setState({
          dataSource: null, 
         })

            this.fetchData(responseJson => {            
              let ds = new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2,
              }); 
              const data = responseJson.results;
                console.log(responseJson);

              this.setState({
                dataSource: ds.cloneWithRows(data),
                isLoading: false,
                _data: data,
                _dataAfter: responseJson.after,
                response: data,
              });
            });

          }

Let me know does it work for you or not :)