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 更改为 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;

我已经从 github 上获取了你的代码并更新了代码。你可以在这里查看 https://snack.expo.io/FbOC0J!MM

Answer 2

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