Question

起初，代码可以运行，但是一段时间后由于该错误而崩溃： 错误发生在iOS和Android上，我使用的是MacOS，也发生在内部版本中。

TypeError: Invalid attempt to spread non-iterable instance

This error is located at:
    in Lojas (at withNavigation.js:25)
    in withNavigation(Lojas) (at ShopList.js:45)
    in RCTView (at Tab.js:11)
    in Tab (at connectStyle.js:392)
    in Styled(Tab) (at ShopList.js:30)
    in StaticContainer (at SceneComponent.js:12)
    in RCTView (at SceneComponent.js:11)
    in SceneComponent (at Tabs/index.js:211)
    in RCTScrollContentView (at ScrollView.js:1038)
    in RCTScrollView (at ScrollView.js:1178)
    in ScrollView (at Tabs/index.js:176)
    in RCTView (at Tabs/index.js:334)
    in ScrollableTabView (at ShopList.js:27)
    in ShopList (at withNavigation.js:25)
    in withNavigation(ShopList) (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:900)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:72)
    in RCTView (at react-native-drawer/index.js:579)
    in RCTView (at react-native-drawer/index.js:566)
    in Drawer (at Drawer/index.js:6)
    in Drawer (at App.js:51)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

_nonIterableSpread
    nonIterableSpread.js:2:22
_toConsumableArray
    toConsumableArray.js:8:76
fetch.then.then$argument_0
    Lojas.js:39:21
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
unstable_runWithPriority
    scheduler.development.js:643:23
Component.prototype.setState
    react.development.js:325:31
fetch.then.then$argument_0
    Lojas.js:37:24
tryCallOne
    core.js:37:14
setImmediate$argument_0
    core.js:123:25
_callTimer
    JSTimers.js:146:14
_callImmediatesPass
    JSTimers.js:194:17
callImmediates
    JSTimers.js:458:30
callImmediates
    [native code]:0
flushedQueue
    [native code]:0
invokeCallbackAndReturnFlushedQueue
    [native code]:0

我的REST API代码：

getPosts = async function() {
    this.setState({ loading:true })

    fetch(`https://parquedasfeiras.online/wp-json/wp/v2/job_listing?filter[meta_key]=_case27_listing_type&filter[meta_value]=${this.state.typeFilter}&page=${this.state.page}`)
    .then(res => res.json())
    .then( res => {
      this.setState(state => ({
        posts: [...state.posts, ...res],
        loading: false
      }));
    })
    .catch((error) => {
        this.setState(loading = false);
    })
};

请注意，仅在报告此错误之后，API才能正常加载。我相信该错误与数组串联有关，但我不知道如何重构它。（[... state.posts，... res]）

Answer 1

向该api发送错误的url时，它将返回错误的对象，而不是导致问题的数组。

例如

{
    "code": "rest_invalid_param",
    "message": "Parâmetro(s) inválido(s): page",
    "data": {
        "status": 400,
        "params": {
            "page": "page não é do tipo integer."
        }
    }
}

您需要检查它是否是对象数组。

.then( res => {
    if(Array.isArray(res)){
        this.setState(state => ({
            posts: [...state.posts, ...res],
            loading: false
        }));
    } else {
        console.log(res.code, res.message) // display error message
    }
})

您可能会收到错误消息，因为您在url中发送了错误的参数。

TypeError：在React Native中传播不可迭代实例的无效尝试

1 个答案: