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

Question

我正试图从后端在屏幕上加载几个项目：

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方法。-node_modules@babel\runtime\helpers\noniterablespread.js:2:22 in_noniterablespread-node_modules@babel\runtime\helpers\toconsumablearray.js:10:111 in_toconsumablearray:10:111 in_toconsumablearray*src\pages\incents\index.js:54:6 in incents-node_modules\react-nativels\libraries\renderer\implements\react实现\reactNativerEnderer-dev.js:307:15 invokeGuardedCallbackImpl-Node_Modules\react-Nativer\Librares\renderer\implementations:531:36 invokeGuardEdCallback-Nodules\React-NativerEnderer-dev.js:531:36 invokeGuardCallback-Nodules\React-Nativer\Librares\Render\ReactNativerEnderer-Dev.js:20488:8ntations\reactnativeRenderer-dev.js:19347:39 in workloopsync-node_modules\react-nativeRenderer-dev.js:18997:22 in renderRoot*[本机代码]:null in renderroot-node_modules\react-nativeRenderer-dev.js:18709:28 in runRootCallback*[本机代码]:null in runrootcallback-node_modules\react-nativeRenderer-dev.js:null in\cjs\scheduler.development.js:643:23 in unstable_runWithPriority-node_modules\react-nativel\libraries\renderer\implementations\reactnativerrenderer-dev.js:5638:22 in flushsynccallbackqueueimpl-node_modules\react-nativerrender-dev.js:5627:28 in flushsynccallbackqueueimpl-node_modules\reactnderer\implementations\reactnativerEnderer-dev.js:11484:17 in dispatchAction*[本机代码]:null in dispatchAction*src\pages\incents\index.js:29:18 in loadements-node_modules\regenerator-runtime\runtime.js:45:44 in trycatch-nodules\regenerator-runtime\runtime.js:274:30 in ve.then$argument_0-node_modules\promise\setimmediate\core.js:37:14 in trycallone-node_modules\promise\setimmediate\corement\core.js:123:25 in setimmediate$argument_0
-node_module\react-native\librares\core\timers\js:146:14 in_calltimer-node_module\react-node_module\react-模块\react-native\库\batchedbridge\messagequee.js:407:6 in__callimmediates-node_modules\react-native\libraries\batchedbridge\messagequee.js:143:6 in__guard$argument_0-node_modules\react-native\libraries\batchedbridge\messagequee.js:384:10 in__guard

警告：%s：错误边界应实现getDerivedStateFromError（）。在该方法中，返回一个状态更新以显示错误消息或回退UI。rooterrorbounder-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\react-nativer\implementations:645:36 In warningWithoutStack.js:7595:16 In callCallback-node_modules\react-native\libraries\renderer\implementations\react-native\libraries\reactnativeRenderer-dev.js:7639:19 In commitupdateEffects-node_modules\react-native\libraries\reactnativeRenderer-dev.js:7630:22 Innderer\implementations\reactnativerEnderer-dev.js:20002:23 in commitlayouteffects-node_modules\react-nativer\libraries\renderer\implements\reactnativerEnderer-dev.js:307:15 in invokeGuardedCallbackimpl-node_modules\react-nativer\libraries\render\implements:531:36 in er.development.js:643:23 in unstable_runWithPriority-node_modules\react-native\libraries\renderer\implementations\reactnativeRenderer-dev.js:19590:4 in commitRoot*[本机代码]:null in commitRoot-node_modules\react-nativeRenderer-dev.js:18709:28 in runRootCallback*[本机代码]:null in runRootCallbackUment_1-node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority-node_modules\react-native\libraries\renderer\implements\reactnativerrenderer-dev.js:5638:22 in flushsynccallbackqueueimpl-node_modules\react-nativerrenderer-dev.js:5627:28 in Er\implementations\reactnativerEnderer-dev.js:11484:17 in dispatchAction*[本机代码]:null in dispatchAction*src\pages\invents\index.js:29:18 in loadements-node_modules\regenerator-runtime\runtime.js:45:44 in trycatch-nodules\regenerater-runtime\runtime.js:274:30 inimpl.resolve.then$argument_0-node_modules\promise\setimmediate\core.js:37:14 in trycallone-node_modules\promise\setimmediate\corement_0
-node_modules\react-native\librares\core\timers\js:143:25 in setimmediate\argument_0
-node_modules\react-native\librares\core\timers\js:146:14 in node_modules\react-native\libraries\batchedbridge\messagequee.js:407:6 in__callImmediates-node_modules\react-native\libraries\batchedbridge\messagequee.js:143:6 in__guard$argument_0-node_module\react-native\libraries\batchedbridge\messagequee.js:384:10 in__guard r-node_modules\react-nativeLibraries\batchedbridge\messagequee.js:407:6 in__callimmediates-node_modules\react-nativels\libraries\batchedbridge\messagequee.js:143:6 in__guard$argument_0-node_modules\react-nativels\libraries\batchedbridge\messagequee.js:384:10 in__guard

看起来Flatlist阻止我的函数loadEvents（）填充我的数组，当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>
     )}
 />

Answer 1

你能发送整个组件的代码和事件数据的结构吗？消息称您试图传播一个不可迭代的实例。可能是您得到了一个未解析的json对象？如果是这样，请尝试使用json.parse将json字符串转换为js结构