时间戳

首页 > 解决方案 > App.js 的渲染方法出错？React-Native 问题

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

问题描述

下面粘贴的是我的代码：

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

标签： javascriptreact-native

解决方案

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

推荐阅读