Flatlist React-Native组件阻止我的数组填充导致应用程序崩溃

问题描述 投票：0回答：3

我正在尝试从后端在屏幕上加载一些项目：

async function loadIncidents() {
    try {
      const response = await api.get("incidents");
      const theData = response.data;
      console.log(theData);
      setIncidents(theData);
      console.log(incidents);
    } catch (e) {
      console.error(e.message);
    }
  }

  useEffect(() => {
    loadIncidents();
  }, []);

它确实起作用，我可以在日志中看到我的数据，但是只有当负责渲染每个项目的Flatlist没有注释时，它不会填充我的数组并显示错误：

无效的尝试传播不可迭代的实例。为了可迭代的非数组对象必须具有Symbol.iterator方法。-_nonIterableSpread中的node_modules @ babel \ runtime \ helpers \ nonIterableSpread.js：2：22-_toConsumableArray中的node_modules @ babel \ runtime \ helpers \ toConsumableArray.js：10：111*事故中的src \ pages \ Incidents \ index.js：54：6-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：10696：27在renderWithHooks中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：12842：6在updateFunctionComponent中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：307：15在invokeGuardedCallbackImpl中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：531：36在invokeGuardedCallback中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：20488：8在beginWork $$ 1中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：19370：24在performUnitOfWork中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：19347：39在workLoopSync中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：18997：22在renderRoot中* [本机代码]：renderRoot中为null-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：18709：28在runRootCallback中* [native code]：在runRootCallback中为null-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：5642：32在runWithPriority $ argument_1中-不稳定_runWithPriority中的node_modules \ scheduler \ cjs \ scheduler.development.js：643：23-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：5638：22在flushSyncCallbackQueueImpl中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：5627：28在flushSyncCallbackQueue中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：18556：30在scheduleUpdateOnFiber中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：11484：17在dispatchAction中* [本机代码]：在dispatchAction中为null* src \ pages \ Incidents \ index.js：29：18在loadIncidents中-tryCatch中的node_modules \ regenerator-runtime \ runtime.js：45：44-调用中的node_modules \ regenerator-runtime \ runtime.js：274：30-tryCatch中的node_modules \ regenerator-runtime \ runtime.js：45：44-调用中的node_modules \ regenerator-runtime \ runtime.js：135：28-PromiseImpl.resolve.then $ argument_0中的node_modules \ regenerator-runtime \ runtime.js：145：19-tryCallOne中的node_modules \ promise \ setimmediate \ core.js：37：14-setImmediate $ argument_0中的node_modules \ promise \ setimmediate \ core.js：123：25-_callTimer中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：146：14-_callImmediatesPass中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：194：17-callImmediates中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：458：30* [本机代码]：callImmediates中为null-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：407：6在__callImmediates中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：143：6在__guard $ argument_0中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：384：10在__guard中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：142：17在__guard $ argument_0中* [本机代码]：flushedQueue中为null* [本机代码]：callFunctionReturnFlushedQueue中为空

警告：％s：应该实施错误边界getDerivedStateFromError（）。在该方法中，将状态更新返回到显示错误消息或后备UI。RootErrorBoundary-console.error中的node_modules \ react-native \ Libraries \ YellowBox \ YellowBox.js：63：8-错误的node_modules \ expo \ build \ environment \ muteWarnings.fx.js：27：24-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：645：36在warningWithoutStack中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：18056：16在回调中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：7595：16在callCallback中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：7639：19在commitUpdateEffects中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：7630：22在commitUpdateQueue中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：17116：10在commitLifeCycles中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：20002：23在commitLayoutEffects中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：307：15在invokeGuardedCallbackImpl中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：531：36在invokeGuardedCallback中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：19768：10在commitRootImpl中* [native code]：在commitRootImpl中为null-不稳定_runWithPriority中的node_modules \ scheduler \ cjs \ scheduler.development.js：643：23-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：19590：4在commitRoot中* [本机代码]：在commitRoot中为null-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：18709：28在runRootCallback中* [native code]：在runRootCallback中为null-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：5642：32在runWithPriority $ argument_1中-不稳定_runWithPriority中的node_modules \ scheduler \ cjs \ scheduler.development.js：643：23-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：5638：22在flushSyncCallbackQueueImpl中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：5627：28在flushSyncCallbackQueue中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：18556：30在scheduleUpdateOnFiber中-node_modules \ react-native \ Libraries \ Renderer \ implementations \ ReactNativeRenderer-dev.js：11484：17在dispatchAction中* [本机代码]：在dispatchAction中为null* src \ pages \ Incidents \ index.js：29：18在loadIncidents中-tryCatch中的node_modules \ regenerator-runtime \ runtime.js：45：44-调用中的node_modules \ regenerator-runtime \ runtime.js：274：30-tryCatch中的node_modules \ regenerator-runtime \ runtime.js：45：44-调用中的node_modules \ regenerator-runtime \ runtime.js：135：28-PromiseImpl.resolve.then $ argument_0中的node_modules \ regenerator-runtime \ runtime.js：145：19-tryCallOne中的node_modules \ promise \ setimmediate \ core.js：37：14-setImmediate $ argument_0中的node_modules \ promise \ setimmediate \ core.js：123：25-_callTimer中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：146：14-_callImmediatesPass中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：194：17-callImmediates中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：458：30* [本机代码]：callImmediates中为null-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：407：6在__callImmediates中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：143：6在__guard $ argument_0中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：384：10在__guard r中-_callImmediatesPass中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：194：17-callImmediates中的node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js：458：30* [本机代码]：callImmediates中为null-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：407：6在__callImmediates中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：143：6在__guard $ argument_0中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：384：10在__guard中-node_modules \ react-native \ Libraries \ BatchedBridge \ MessageQueue.js：142：17在__guard $ argument_0中* [本机代码]：flushedQueue中为null* [本机代码]：callFunctionReturnFlushedQueue中为空

似乎Flatlist阻止我的函数loadIncidents（）填充我的数组，当存在Flatlist并调用我的变量时，数组返回空。我尝试了几种方法对其进行调试，但无法正常工作。这是Flatlist，没有什么特别的：

<FlatList
     data={incidents}
     style={styles.incidentList}
     keyExtractor={(incident) => String(incident.id)}
     showsVerticalScrollIndicator={false}
     renderItem={({ item: incident }) => (
       <View style={styles.incident}>
         <Text style={styles.incidentProperty}>NGO:</Text>
         <Text style={styles.incidentValue}>{incident.name}</Text>
       </View>
     )}
 />
javascript reactjs react-native react-native-android react-native-flatlist
3个回答
0
投票

您可以发送整个组件的代码和事件数据的结构吗？该消息表明您正在尝试传播不可迭代的实例。可能是您找回了未解析的json对象？如果是这样，请尝试使用JSON.parse将json字符串转换为js结构]

0
投票

API调用返回的数据

> Object {   "config": Object {
>     "adapter": [Function xhrAdapter],     
>     "baseURL": "http://192.168.xxx.xxx:3333",
>     "data": undefined,
>     "headers": Object {
>       "Accept": "application/json, text/plain, */*",
>     },
>     "maxContentLength": -1,
>     "method": "get",
>     "params": Object {
>       "page": 1,
>     },
>     "timeout": 0,
>     "transformRequest": Array [
>       [Function transformRequest],
>     ],
>     "transformResponse": Array [
>       [Function transformResponse],
>     ],
>     "url": "/incidents",
>     "validateStatus": [Function validateStatus],
>     "xsrfCookieName": "XSRF-TOKEN",
>     "xsrfHeaderName": "X-XSRF-TOKEN",   },   "data": Object {
>     "incidents": Array [
>       Object {
>         "city": "Vancouver",
>         "description": "details of the Incident report",
>         "email": "[email protected]",
>         "id": 3,
>         "name": "Apade",
>         "ngo_id": "5209f9ae",
>         "state": "BC",
>         "title": "IR 2",
>         "value": 110,
>         "whatsapp": "604 123 1234",
>       },
>       Object {
>         "city": "Vancouver",
>         "description": "details of the Incident report",
>         "email": "[email protected]",
>         "id": 6,
>         "name": "Apade",
>         "ngo_id": "5209f9ae",
>         "state": "BC",
>         "title": "IR 4",
>         "value": 120,
>         "whatsapp": "604 123 1234",
>       },
>       Object {
>         "city": "Vancouver",
>         "description": "details of the Incident report",
>         "email": "[email protected]",
>         "id": 7,
>         "name": "Apade",
>         "ngo_id": "5209f9ae",
>         "state": "BC",
>         "title": "IR 5",
>         "value": 120,
>         "whatsapp": "604 123 1234",
>       },
>       Object {
>         "city": "Vancouver",
>         "description": "details of the Incident report",
>         "email": "[email protected]",
>         "id": 8,
>         "name": "Apade",
>         "ngo_id": "5209f9ae",
>         "state": "BC",
>         "title": "IR 6",
>         "value": 120,
>         "whatsapp": "604 123 1234",
>       },
>       Object {
>         "city": "Vancouver",
>         "description": "details of the Incident report",
>         "email": "[email protected]",
>         "id": 9,
>         "name": "Apade",
>         "ngo_id": "5209f9ae",
>         "state": "BC",
>         "title": "IR 7",
>         "value": 120,
>         "whatsapp": "604 123 1234",
>       },
>     ],   },   "headers": Object {
>     "access-control-allow-origin": "*",
>     "cache-control": "public, max-age=0",
>     "connection": "keep-alive",
>     "content-length": "1015",
>     "content-type": "application/json; charset=utf-8",
>     "date": "Fri, 17 Apr 2020 17:18:17 GMT",
>     "etag": "W/\"3f7-qB7SdnrSk8xOqSo8f9RGhorMNdk\"",
>     "x-powered-by": "Express",
>     "x-total-count": "12",   },   "request": XMLHttpRequest {
>     "DONE": 4,
>     "HEADERS_RECEIVED": 2,
>     "LOADING": 3,
>     "OPENED": 1,
>     "UNSENT": 0,
>     "_aborted": false,
>     "_cachedResponse": undefined,
>     "_hasError": false,
>     "_headers": Object {
>       "accept": "application/json, text/plain, */*",
>     },
>     "_incrementalEvents": false,
>     "_lowerCaseResponseHeaders": Object {
>       "access-control-allow-origin": "*",
>       "cache-control": "public, max-age=0",
>       "connection": "keep-alive",
>       "content-length": "1015",
>       "content-type": "application/json; charset=utf-8",
>       "date": "Fri, 17 Apr 2020 17:18:17 GMT",
>       "etag": "W/\"3f7-qB7SdnrSk8xOqSo8f9RGhorMNdk\"",
>       "x-powered-by": "Express",
>       "x-total-count": "12",
>     },
>     "_method": "GET",
>     "_requestId": null,
>     "_response": "{\"incidents\":[{\"id\":3,\"title\":\"IR 2\",\"description\":\"details of the Incident
> report\",\"value\":110,\"ngo_id\":\"5209f9ae\",\"name\":\"Apade\",\"email\":\"[email protected]\",\"whatsapp\":\"604
> 123
> 1234\",\"city\":\"Vancouver\",\"state\":\"BC\"},{\"id\":6,\"title\":\"IR
> 4\",\"description\":\"details of the Incident
> report\",\"value\":120,\"ngo_id\":\"5209f9ae\",\"name\":\"Apade\",\"email\":\"[email protected]\",\"whatsapp\":\"604
> 123
> 1234\",\"city\":\"Vancouver\",\"state\":\"BC\"},{\"id\":7,\"title\":\"IR
> 5\",\"description\":\"details of the Incident
> report\",\"value\":120,\"ngo_id\":\"5209f9ae\",\"name\":\"Apade\",\"email\":\"[email protected]\",\"whatsapp\":\"604
> 123
> 1234\",\"city\":\"Vancouver\",\"state\":\"BC\"},{\"id\":8,\"title\":\"IR
> 6\",\"description\":\"details of the Incident
> report\",\"value\":120,\"ngo_id\":\"5209f9ae\",\"name\":\"Apade\",\"email\":\"[email protected]\",\"whatsapp\":\"604
> 123
> 1234\",\"city\":\"Vancouver\",\"state\":\"BC\"},{\"id\":9,\"title\":\"IR
> 7\",\"description\":\"details of the Incident
> report\",\"value\":120,\"ngo_id\":\"5209f9ae\",\"name\":\"Apade\",\"email\":\"[email protected]\",\"whatsapp\":\"604
> 123 1234\",\"city\":\"Vancouver\",\"state\":\"BC\"}]}",
>     "_responseType": "",
>     "_sent": true,
>     "_subscriptions": Array [],
>     "_timedOut": false,
>     "_trackingName": "unknown",
>     "_url": "http://192.168.xxx.xxx:3333/incidents?page=1",
>     "readyState": 4,
>     "responseHeaders": Object {
>       "Access-Control-Allow-Origin": "*",
>       "Cache-Control": "public, max-age=0",
>       "Connection": "keep-alive",
>       "Content-Length": "1015",
>       "Content-Type": "application/json; charset=utf-8",
>       "Date": "Fri, 17 Apr 2020 17:18:17 GMT",
>       "ETag": "W/\"3f7-qB7SdnrSk8xOqSo8f9RGhorMNdk\"",
>       "X-Powered-By": "Express",
>       "X-Total-Count": "12",
>     },
>     "responseURL": "http://192.168.xxx.xxx:3333/incidents?page=1",
>     "status": 200,
>     "timeout": 0,
>     "upload": XMLHttpRequestEventTarget {},
>     "withCredentials": true,   },   "status": 200,   "statusText": undefined, }
0
投票

[FlatList应该接收数组作为数据，当您发布时从api响应中获取时，您得到的错误是您给了它Object。

看起来您需要

 setIncidents(theData.incidents)

代替。

关于此的另一件事

  setIncidents(theData);
  console.log(incidents)

通常，

SetState是异步调用，因此记录的变量无论如何都将是此处的先前记录

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.