Flatlist React-Native component prevents my array from populating causing app to crash

Question

I'm trying to load a few items on the screen from the backend:

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();
  }, []);

It does work and I can see my data in logged, but only when the Flatlist, responsible to render each item, is not commented it doesn't populate my array and shows me an error:

Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method. - node_modules@babel\runtime\helpers\nonIterableSpread.js:2:22 in _nonIterableSpread - node_modules@babel\runtime\helpers\toConsumableArray.js:10:111 in _toConsumableArray * src\pages\Incidents\index.js:54:6 in Incidents - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:10696:27 in renderWithHooks - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12842:6 in updateFunctionComponent - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20488:8 in beginWork$$1 - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot * [native code]:null in renderRoot - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback * [native code]:null in runRootCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1 - node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11484:17 in dispatchAction * [native code]:null in dispatchAction * src\pages\Incidents\index.js:29:18 in loadIncidents - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:274:30 in invoke - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:135:28 in invoke - node_modules\regenerator-runtime\runtime.js:145:19 in PromiseImpl.resolve.then$argument_0 - node_modules\promise\setimmediate\core.js:37:14 in tryCallOne - node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer - node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass - node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates * [native code]:null in callImmediates - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0 - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0 * [native code]:null in flushedQueue * [native code]:null in callFunctionReturnFlushedQueue

Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary - node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:8 in console.error - node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:645:36 in warningWithoutStack - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18056:16 in callback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7595:16 in callCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7639:19 in commitUpdateEffects - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7630:22 in commitUpdateQueue - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17116:10 in commitLifeCycles - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20002:23 in commitLayoutEffects - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19768:10 in commitRootImpl * [native code]:null in commitRootImpl - node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19590:4 in commitRoot * [native code]:null in commitRoot - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback * [native code]:null in runRootCallback - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1 - node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber - node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11484:17 in dispatchAction * [native code]:null in dispatchAction * src\pages\Incidents\index.js:29:18 in loadIncidents - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:274:30 in invoke - node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch - node_modules\regenerator-runtime\runtime.js:135:28 in invoke - node_modules\regenerator-runtime\runtime.js:145:19 in PromiseImpl.resolve.then$argument_0 - node_modules\promise\setimmediate\core.js:37:14 in tryCallOne - node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer - node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass - node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates * [native code]:null in callImmediates - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0 - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard r - node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass - node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates * [native code]:null in callImmediates - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0 - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard - node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0 * [native code]:null in flushedQueue * [native code]:null in callFunctionReturnFlushedQueue

It looks like the Flatlist is preventing my function loadIncidents() from populating my array, when Flatlist is present and calling my variable the array return empty. I tried a few ways to debug it but won't work. Here's the Flatlist, there's nothing special:

<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>
     )}
 />

Answer 1

FlatList should receive arrays as data, the error you get is you gave it Object instead, as you posted you get from api response.

Looks like you need to

---

 setIncidents(theData.incidents)

---

Instead.

Another thing about this

---

  setIncidents(theData);
  console.log(incidents)

---

In general,

SetState is async call, therefore the logged variable gonna be the previous anyhow at here

Answer 2

can you send the code of the whole component and the structure of the incidents data? The message says your are trying to spread a non-iterable instance. Might be that you are getting back a unparsed json object? If so try to use JSON.parse to transform the json string into a js structure

Answer 3

Data returned from API call

> 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, }