App.js 的渲染方法出错？React-Native 问题

Question

下面粘贴的是我的代码：

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;

我的渲染方法出现错误：错误警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。

在谷歌上搜索了一下后，人们告诉我检查我的进口商品，但我发誓他们做对了。有人可以帮我理解这个吗？我正在构建一个任务管理器，我希望稍后实现 Redux，但我只是想先构建应用程序：稍后添加 redux。

完整的 Github 项目：https://github.com/calebdockal/TaskManagerApp2

Answer 1

代码中几乎没有更改。在 import 语句中删除 AddTask 和 TaskList 周围的大括号import AddTask from './src/screens/AddTask';import TaskList from './src/screens/TaskList';在 import 语句中将 Flatlist 更改为 FlatListimport {View, StyleSheet, FlatList, Alert} from 'react-native';并更改退货声明。然后将 renderItem 中的变量从任务更新为项目，将项目更新为任务，如下所示<FlatList data={tasks}&nbsp; &nbsp; renderItem={({item}) => (&nbsp; &nbsp; &nbsp; &nbsp; <TaskList task={item} deleteTask={deleteTask} />&nbsp; &nbsp; )}/>完整代码如下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 = () => {&nbsp; const [tasks, setTasks] = useState([{id: uuidv4(), text: 'Task 1'}]);&nbsp; const deleteTask = (id) => {&nbsp; &nbsp; setTasks((prevTasks) => {&nbsp; &nbsp; &nbsp; return prevTasks.filter((task) => task.id != id);&nbsp; &nbsp; });&nbsp; };&nbsp; const addTask = (text) => {&nbsp; &nbsp; if (!text) {&nbsp; &nbsp; &nbsp; Alert.alert('Error', 'Please enter a task', {text: 'Ok'});&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setTasks((prevTask) => {&nbsp; &nbsp; &nbsp; &nbsp; return [{id: uuidv4(), text}, ...prevTask];&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; };&nbsp;&nbsp;&nbsp; return (&nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <AddTask addTask={addTask} />&nbsp; &nbsp; &nbsp; &nbsp;<FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={tasks}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={({item}) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TaskList task={item} deleteTask={deleteTask} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp;&nbsp;&nbsp; )}/>&nbsp; &nbsp; </View>&nbsp; );};const styles = StyleSheet.create({&nbsp; container: {&nbsp; &nbsp; flex: 1,&nbsp; &nbsp; paddingTop: 10,&nbsp; },});export default App;我已经从 github 上获取了你的代码并更新了代码。你可以在这里查看 https://snack.expo.io/FbOC0J!MM

Answer 2

您需要在代码顶部添加 import React from 'react'