React native TypeError:在React Native中传播不可iterable实例的尝试无效

起初代码正常工作，但过了一段时间后，代码崩溃，出现以下错误： 这个错误发生在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]）

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

e、 g

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

.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中发送了错误的参数。

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

e、 g

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

.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中发送了错误的参数。

根据网络选项卡，您使用的端点的输出是什么？您的

res

变量可能不是数组。它应该是数组。根据网络选项卡，您使用的端点的输出是什么？您的

res

变量可能不是数组。它应该是数组。