[英]TypeError: Invalid attempt to spread non-iterable instance
After compiling to android and downloading via Store I get the error:编译到 android 并通过 Store 下载后出现错误:
"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.但是使用“react-native run-android”不会产生错误消息,因此我找不到调试它的好方法。
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.谢谢你的帮助。
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]
.基于关于扩展运算符的问题,我假设它是这一行:
newArticlesData=[...prevData,...response.data]
。 I assume your prevData
is iterable, but is your response data?我假设您的
prevData
是可迭代的,但是您的响应数据是吗? Try newArticlesData=[...prevData, response.data]
?试试
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');
I was getting this crash in release android build only.我只在发布 android 版本中遇到了这个崩溃。 release ios build and android debug build working perfectly.
发布 ios 构建和 android 调试构建完美运行。
After spending a few hours found solutions from the internet.花了几个小时后从互联网上找到了解决方案。
edit your .babelrc
and add following into your plugins编辑您的
.babelrc
并将以下内容添加到您的插件中
[
"@babel/plugin-transform-spread",
{
"loose": true
}
]
so Here is my .babelrc
file所以这是我的
.babelrc
文件
{
"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 :)我希望这个答案可以帮助某人并节省几个小时:)
I removed prevData and replaced it with this.state.articlesData.我删除了 prevData 并将其替换为 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.
我也改变了逻辑,所以一开始当articlesData 为空时,它不会合并两个对象,而是只使用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 this.state.currentPage!=1 与 oldData != empty 几乎相同
It workes now.现在可以了。
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');
});
};
I was getting the same error in a React app in iOS 7 even though Babel was configured to transpile any spread operators.我在 iOS 7 的 React 应用程序中遇到了同样的错误,即使 Babel 被配置为转换任何传播运算符。 Ultimately, it ended up being some odd issue with an import in my
node_modules
.最终,我的
node_modules
中的导入最终成为了一些奇怪的问题。 The error was resolved after deleting my node_modules
directory and simply reinstalling via yarn install
(or npm install
).删除我的
node_modules
目录并简单地通过yarn install
(或npm install
)重新安装后,错误得到解决。
const [myObj,setmyObj = useState({1:"one",2:"two",3:"three",4:"four"} )
where tries to在哪里尝试
let newMyObj = [...myObj] // this will give error as we are trying to iterate over obj by using [] , this way can we used when state is array.
Solution解决方案
let newMyObj = {...myObj} // this will works perfectly fine.Iteration is possible above way.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.