Flatlist React-Native 组件阻止我的数组填充导致应用程序崩溃
Flatlist React-Native component prevents my array from populating causing app to crash
我正在尝试从后端在屏幕上加载一些项目：
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 未被注释时，它才不会填充我的数组并向我显示错误：
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$
- 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
看起来 Flatlist 阻止我的函数 loadIncidents() 填充我的数组，当 Flatlist 存在并调用我的变量数组 return 为空时。我尝试了几种方法来调试它，但不起作用。
这是 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>
)}
/>
能发下整个组件的代码和事件数据的结构吗？
该消息说您正在尝试传播一个不可迭代的实例。可能是您要取回未解析的 json 对象？
如果是这样尝试使用 JSON.parse 将 json 字符串转换为 js 结构
从 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": "info@apade.ca",
> "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": "info@apade.ca",
> "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": "info@apade.ca",
> "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": "info@apade.ca",
> "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": "info@apade.ca",
> "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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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, }
FlatList 应该接收数组作为数据，你得到的错误是你给它对象而不是，正如你发布的那样，你从 api 响应中得到。
看来你需要
setIncidents(theData.incidents)
相反。
关于这个的另一件事
setIncidents(theData);
console.log(incidents)
一般来说，
SetState 是异步调用，因此这里记录的变量无论如何都会是前一个
我正在尝试从后端在屏幕上加载一些项目：
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 未被注释时，它才不会填充我的数组并向我显示错误：
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$ - 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 callFunctionReturnFlushedQueueWarning: %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
看起来 Flatlist 阻止我的函数 loadIncidents() 填充我的数组，当 Flatlist 存在并调用我的变量数组 return 为空时。我尝试了几种方法来调试它，但不起作用。 这是 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>
)}
/>
能发下整个组件的代码和事件数据的结构吗？ 该消息说您正在尝试传播一个不可迭代的实例。可能是您要取回未解析的 json 对象？ 如果是这样尝试使用 JSON.parse 将 json 字符串转换为 js 结构
从 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": "info@apade.ca",
> "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": "info@apade.ca",
> "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": "info@apade.ca",
> "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": "info@apade.ca",
> "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": "info@apade.ca",
> "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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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\":\"info@apade.ca\",\"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, }
FlatList 应该接收数组作为数据，你得到的错误是你给它对象而不是，正如你发布的那样，你从 api 响应中得到。
看来你需要
setIncidents(theData.incidents)
相反。
关于这个的另一件事
setIncidents(theData);
console.log(incidents)
一般来说，
SetState 是异步调用，因此这里记录的变量无论如何都会是前一个