Javascript App.js的渲染方法出错？回答母语问题

下面粘贴的是我的代码：

import React, {useState} from 'react';
import {View, StyleSheet, Flatlist, Alert} from 'react-native';
import 'react-native-get-random-values';
import {v4 as uuidv4} from 'uuid';
import {AddTask} from './src/screens/AddTask';
import {TaskList} from './src/screens/TaskList';

const App = () => {
  const [tasks, setTasks] = useState([{id: uuidv4(), text: 'Task 1'}]);

  const deleteTask = (id) => {
    setTasks((prevTasks) => {
      return prevTasks.filter((task) => task.id != id);
    });
  };
  const addTask = (text) => {
    if (!text) {
      Alert.alert('Error', 'Please enter a task', {text: 'Ok'});
    } else {
      setTask((prevTask) => {
        return [{id: uuid(), text}, ...prevTask];
      });
    }
  };

  return (
    <View style={styles.container}>
      <AddTask addTask={addTask} />
      <Flatlist
        data={tasks}
        renderItem={({task}) => (
          <TaskList item={task} deleteTask={deleteTask} />
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
  },
});

export default App;

import React，{useState}来自“React”；
从“react native”导入{View，StyleSheet，Flatlist，Alert}；
导入“获取随机值”；
从“uuid”导入{v4作为uuidv4}；
从“./src/screens/AddTask”导入{AddTask}；
从“./src/screens/TaskList”导入{TaskList}；
常量应用=（）=>{
const[tasks，setTasks]=useState（[{id:uuidv4（），text:'Task 1'}]）；
常量deleteTask=（id）=>{
setTasks（（prevTasks）=>{
返回prevTasks.filter（（task）=>task.id！=id）；
});
};
const addTask=（文本）=>{
如果（！text）{
Alert.Alert（'Error'，'Please enter a task'，{text:'Ok'}）；
}否则{
setTask（（prevTask）=>{
返回[{id:uuid（），text}，…prevTask]；
});
}
};
返回(
您需要在代码顶部的“React”中添加import React
代码中几乎没有要做的更改

在import语句中，删除AddTask和TaskList周围的花括号

import AddTask from './src/screens/AddTask';
import TaskList from './src/screens/TaskList';

在import语句中将Flatlist更改为Flatlist

import {View, StyleSheet, FlatList, Alert} from 'react-native';

然后将renderItem中的变量从一个任务更新到另一个项目，从一个项目更新到另一个任务，如下所示

<FlatList data={tasks}
    renderItem={({item}) => (
        <TaskList task={item} deleteTask={deleteTask} />
    )}
/>

(
)}
/>

完整代码如下

import React, {useState} from 'react';
import {View, StyleSheet, FlatList, Alert, Text} from 'react-native';
import 'react-native-get-random-values';
import {v4 as uuidv4} from 'uuid';
import AddTask from './src/screens/AddTask';
import TaskList from './src/screens/TaskList';

const App = () => {
  const [tasks, setTasks] = useState([{id: uuidv4(), text: 'Task 1'}]);

  const deleteTask = (id) => {
    setTasks((prevTasks) => {
      return prevTasks.filter((task) => task.id != id);
    });
  };
  const addTask = (text) => {
    if (!text) {
      Alert.alert('Error', 'Please enter a task', {text: 'Ok'});
    } else {
      setTasks((prevTask) => {
        return [{id: uuidv4(), text}, ...prevTask];
      });
    }
  };  
  return (
    <View style={styles.container}>    
      <AddTask addTask={addTask} />
       <FlatList
          data={tasks}
          renderItem={({item}) => (
            <TaskList task={item} deleteTask={deleteTask} />
          )}
        />  
  )}
/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
  },
});

export default App;

import React，{useState}来自“React”；
从“react native”导入{View，StyleSheet，FlatList，Alert，Text}；
导入“获取随机值”；
从“uuid”导入{v4作为uuidv4}；
从“/src/screens/AddTask”导入AddTask；
从“/src/screens/TaskList”导入任务列表；
常量应用=（）=>{
const[tasks，setTasks]=useState（[{id:uuidv4（），text:'Task 1'}]）；
常量deleteTask=（id）=>{
setTasks（（prevTasks）=>{
返回prevTasks.filter（（task）=>task.id！=id）；
});
};
const addTask=（文本）=>{
如果（！text）{
Alert.Alert（'Error'，'Please enter a task'，{text:'Ok'}）；
}否则{
setTasks（（prevTask）=>{
返回[{id:uuidv4（），text}，…prevTask]；
});
}
};  
返回(
啊，是的，我很抱歉我的帖子中出现了格式问题，我现在编辑了它，以便它反映我的实际代码。非常感谢！现在，uuid是我唯一的问题，uuidv4已弃用。您知道我如何修复吗？@CalebDockal模块在uuidv4包中已弃用，但从代码中我看到您正在使用uuid包中的uuidv4。您正在使用g正确的包/模块。这不是不推荐的。