Question

编译到android并通过Store下载后，出现错误：

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

但是使用“ 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
    }); 
});

感谢您的帮助。

Answer 1

这是因为它是运行时错误，而不是“编译时”错误。

是否存在与错误相关的行号？基于与传播算子有关的问题，我将假定为以下行：newArticlesData=[...prevData,...response.data]。我假设您的prevData是可迭代的，但是您的响应数据是吗？尝试newArticlesData=[...prevData, response.data]吗？

下面是一个无效的传播操作符使用示例：

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

我仅在android版本中遇到此崩溃。发布ios版本和android debug版本完美运行。

花了几个小时后，找到了来自互联网的解决方案。

编辑您的.babelrc并将以下内容添加到您的插件中

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

这是我的.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
}

我希望这个答案可以帮助某人并节省几个小时：）

Answer 3

我删除了prevData并将其替换为this.state.articlesData。我还更改了逻辑，这样一开始，当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 =与oldData！=空

几乎相同

现在可以使用。

Answer 4

我在 iOS 7 的 React 应用程序中遇到了同样的错误，即使 Babel 被配置为转译任何扩展运算符。最终，它结束了在我的 node_modules 中导入的一些奇怪问题。删除我的 node_modules 目录并通过 yarn install（或 npm install）重新安装后，错误已解决。

TypeError：散布不可迭代实例的无效尝试

4 个答案: