Javascript 如何将react本机可拖动平面列表实现为函数组件而不是类？ 更新

在将“setData（{data}）”更改为“setData（data）”并重新启动iOS模拟器后解决

原职 示例使用类组件，但我更喜欢使用函数组件。下面是我试图实现为功能组件的尝试，但我遇到了一个错误（也在下面）。错误发生在对单个列表项重新排序后，然后列表消失

函数组件尝试

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、TouchableOpacity、视图}；
从“react native DragableFlatlist”导入DragableFlatlist；
从“../components/ScreenTitle”导入屏幕标题；
从“/AppScreen”导入AppScreen；
功能MyMorningScreen（道具）{
const[data，setData]=useState([
{
订单：1，
标签：“开始时间”，
},
{
订单：2，
标签：“锻炼”，
},
{
订单：3，
标签：“淋浴”，
},
]);
const renderItem=（{item，index，drag，isActive}）=>(
{item.label}
);
返回(
index.toString（）}
onDragEnd={（{data}）=>setData（{data}）}
/>
);
}
const styles=StyleSheet.create({
屏幕：{
弹性：1，
},
});
导出默认的MyMorningScreen；

错误

[未处理的承诺拒绝：TypeError:undefined不是函数（靠近“…this.props.data.forEach…”）]
-node_modules/react native draggable flatlist/lib/index.js:192:20在_生成器$argument_1中
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:135784:24 步调一致
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:135686:72 在里面
-tryCallTwo中的node_modules/react native/node_modules/promise/setimmediate/core.js:45:6
-doResolve中的node_modules/react native/node_modules/promise/setimmediate/core.js:200:22
-node_modules/react native/node_modules/promise/setimmediate/core.js:66:11 in promise
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:135665:35 在里面
-commitLifeCycles中的node_modules/react native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15732:12
-commitLayoutEffects中的node_modules/react native/Libraries/Renderer/implementations/react nativerenderer-dev.js:18744:22
-invokeGuardedCallbackImpl中的node_modules/react native/Libraries/Renderer/implementations/reactiveverender-dev.js:265:4
-invokeGuardedCallback中的node_modules/react native/Libraries/Renderer/implementations/reactations/reactationverender-dev.js:476:2
-commitrotimpl中的node_modules/react native/Libraries/Renderer/implementations/reactationiverenderer-dev.js:18483:29
*[本机代码]：CommitroTimpl中为null
-node_modules/scheduler/cjs/scheduler.development.js:653:23运行不稳定，优先级为
-Commitrot中的node_modules/react native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18317:17
-PerformSyncWorkRoot中的节点\u modules/react native/Libraries/Renderer/implementations/reactationiverenderer-dev.js:17697:12
*[本机代码]：PerformSyncWorkRoot中为null
-节点\u modules/react native/Libraries/Renderer/implementations/reactationiverenderer-dev.js:5321:31在runWithPriority$argument\u 1中
-node_modules/scheduler/cjs/scheduler.development.js:653:23运行不稳定，优先级为
-flushSyncCallbackQueueImpl中的node_modules/react native/Libraries/Renderer/implementation/ReactNativeRenderer-dev.js:5316:21
-flushSyncCallbackQueue中的node_modules/react native/Libraries/Renderer/implementations/reactations/reactationiverenderer-dev.js:5304:28
-scheduleUpdateOnFiber中的node_modules/react native/Libraries/Renderer/implementations/reactations/reactations/reactationiverenderer-dev.js:17125:30
-dispatchAction中的node_modules/react native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11003:16
*[本机代码]：dispatchAction中为null
*DragableFlatlist.props.onDragEnd中的app/screens/MyMorningScreen.js:36:21
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136087:19 在里面
-侦听器中的node_modules/react native reanimated/src/core/AnimatedCall.js:9:15
-emit中的node_modules/react native/Libraries/vendor/emitter/EventEmitter.js:189:10
-调用函数中的node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:416:4
-node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:109:6 in_uuuuguard$argument_0
-保护中的node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:364:10
-callFunctionReturnFlushedQueue中的node_modules/react native/Libraries/BatchedBridge/MessageQueue.js:108:4
*[本机代码]：callFunctionReturnFlushedQueue中为null

工作应用程序：

//尝试更新状态，如下所示：
/*.....*/
onDragEnd={（{data}）=>setData（data）}

使用复选框实现更新了完整代码：

import React，{useState}来自“React”；
进口{
样式表，
文本，
可触摸不透明度，
看法
复选框，
}从“反应本机”；
从“react native DragableFlatlist”导入DragableFlatlist；
常量初始数据=[
{
订单：1，
标签：“开始时间”，
伊斯切克：错，
},
{
订单：2，
标签：“锻炼”，
伊斯切克：错，
},
{
订单：3，
标签：“淋浴”，
是的，
},
];
功能MyMorningScreen（道具）{
const[data，setData]=使用状态（initialData）；
const renderItem=（{item，index，drag，isActive}）=>(
{item？.label}
{
手检（项目标签）；
}}
/>
);
常量handleCheck=（标签）=>{
让更新=[…数据]；
updated=updated.map（（任务、索引）=>{
if（label==task.label）{
返回{…task，isCheked:！task.isCheked}；
}
返回任务；
});
setData（更新）；
};
返回(
index.toString（）}
o
import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';
import ScreenTitle from '../components/ScreenTitle';
import AppScreen from './AppScreen';

function MyMorningScreen(props) {
  const [data, setData] = useState([
    {
      order: 1,
      label: 'Start Timeular',
    },
    {
      order: 2,
      label: 'Workout',
    },
    {
      order: 3,
      label: 'Shower',
    },
  ]);

  const renderItem = ({ item, index, drag, isActive }) => (
    <TouchableOpacity style={styles.item} onLongPress={drag}>
      <Text>{item.label}</Text>
    </TouchableOpacity>
  );
  return (
    <AppScreen style={styles.screen}>
      <ScreenTitle title="My Morning" />
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={(item, index) => index.toString()}
          onDragEnd={({ data }) => setData({ data })}
        />
      </View>
    </AppScreen>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
});

export default MyMorningScreen;


[Unhandled promise rejection: TypeError: undefined is not a function (near '...this.props.data.forEach...')]
- node_modules/react-native-draggable-flatlist/lib/index.js:192:20 in __generator$argument_1
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:135784:24 in step
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:135686:72 in <unknown>
- node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:135665:35 in <unknown>
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15732:12 in commitLifeCycles
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
* [native code]:null in commitRootImpl
- node_modules/scheduler/cjs/scheduler.development.js:653:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18317:17 in commitRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot
* [native code]:null in performSyncWorkOnRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:653:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11003:16 in dispatchAction
* [native code]:null in dispatchAction
* app/screens/MyMorningScreen.js:36:21 in DraggableFlatList.props.onDragEnd
* http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136087:19 in <unknown>
- node_modules/react-native-reanimated/src/core/AnimatedCall.js:9:15 in listener
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue