TypeError: Invalid attempt to spread non-iterable instance

Question

After compiling to android and downloading via Store I get the error:

"TypeError: Invalid attempt to spread non-iterable instance"

But using "react-native run-android" creates no error message therefor I can't find a good way to debug it.

fetch(url)
  .then(response => response.json())
  .then(response => {
    if (this._mounted) {
      // let dataSource = this.state.articlesDataSource.cloneWithRows(response.data || [])
      //var rowCount = dataSource.getRowCount();
      var rowCount = Object.keys(response.data).length;

      if (refresh == true) {
        prevData = {};
      } else {
        prevData = this.state.articlesData;
      }
      if (propSearch == "" || propSearch == null) {
        newArticlesData = [...prevData, ...response.data];
      } else {
        newArticlesData = response.data;
      }
      if (response.meta.next_page != null) {
        var rowCount = true;
      } else {
        var rowCount = Object.keys(newArticlesData).length;
      }
      if (this._mounted) {
        this.setState({
          isLoading: false,
          //articlesDataSource: this.state.articlesDataSource.cloneWithRows(response.data),
          articlesData: newArticlesData,
          nextPage: response.meta.next_page,
          fetchUrl: url,
          rowCount: rowCount
        });
      }
    }
  })
  .catch(error => {
    this.setState({
      errorFound: true,
      errorMassage: error,
      isLoading: false
    }); 
});

Thanks for any help.

Answer 1

This is because it is a runtime error, not a "compile time" error.

Is there a line number associated with the error? Based on the question being about the spread operator I'll assume it's this line: newArticlesData=[...prevData,...response.data]. I assume your prevData is iterable, but is your response data? Try newArticlesData=[...prevData, response.data]?

Here's an example of invalid spread operator use:

function trySpread(object) {
  let array;
  try {
    array = [...object];
    console.log('No error', array);
  } catch(error) {
    console.log('error', error);
  }
}

// error
trySpread({});
trySpread({foo: 'bar'});
trySpread(4);

// no error
trySpread([]);
trySpread(['foobar']);
trySpread('foobar');

Answer 2

I was getting this crash in release android build only. release ios build and android debug build working perfectly.

After spending a few hours found solutions from the internet.

edit your .babelrc and add following into your plugins

[
      "@babel/plugin-transform-spread",
      {
        "loose": true
      }
    ]

so Here is my .babelrc file

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "syntax-trailing-function-commas",
    "@babel/plugin-transform-flow-strip-types",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-transform-spread",
      {
        "loose": true
      }
    ]
  ],
  "sourceMaps": true
}

I hope this answer helps someone and save few hours :)

Answer 3

I removed prevData and replaced it with this.state.articlesData. I also change the logic so at the begining when articlesData is empty, it doesn't merge two objects, instead just uses the response.data.

if(propSearch=="" || propSearch==null && this.state.currentPage!=1 && refresh!=true){
    newData=[...this.state.articlesData,...response.data]
}
else{
    newData=response.data
}

this.state.currentPage!=1 is pretty much the same as oldData != empty

It workes now.

Answer 4

this is because you play around with objects but you trying to copy objects in the array

convert this line

newArticlesData = [...prevData, ...response.data];

to

 newArticlesData = {...prevData, ...response.data};

Your problem solved my code for this is

 fetch(url, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'x-sh-auth': userToken || userStoredToken,
      },
    })
      .then(response => response.text())
      .then(async responseText => {
        let responseData = JSON.parse(responseText);
        console.log('responseData HomeWhatsNewUser', responseData);
        if (responseData.code == 200) {
          setpageNumberwhatsnewap(pageNumberwhatsnewapi + 1);
          setiSloding(false);
          setWhatsNewAPiUser({...WhatsNewAPiUser, ...responseData});
          // setWhatsNewAPiUser(responseData);
          // setLoadMoreNewUserApiLink(responseData.load_more_url);
        } else {
          if (responseData.message === 'Your are un authorize') {
            await AsyncStorage.removeItem('@userData');
            await AsyncStorage.removeItem('@userToken');
            props.navigation.navigate('HomeScreen');
          }
          Toast.show({
            text1: responseData.message,
          });
          setiSloding(false);
        }
      })
      .catch(error => {
        setiSloding(false);
        console.log(error, 'error from APi');
      });
  };