类型错误:尝试传播不可迭代实例无效

Question

编译到android并通过商店下载后，我收到错误：

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

但是使用"反应本机运行-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

我仅在发布安卓版本中遇到此崩溃。 发布iOS构建和Android调试构建完美运行。

花了几个小时从互联网上找到解决方案后。

编辑您的.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

这是因为您玩弄对象，但您尝试复制数组中的对象

转换此行

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

自

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

您的问题解决了我的代码，因此是

 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');
      });
  };

Answer 4

const [myObj,setmyObj = useState({1:"one",2:"two",3:"three",4:"four"} )

在哪里尝试

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.

溶液

let newMyObj = {...myObj} // this will works perfectly fine.Iteration is possible above way.

Answer 5

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