React Native：我对这个 React 有疑问

Question

Can some one help with that please, I tried almost all ways but I can't any mistake or errors: error is Element type is invalid: expected a string or class/function but got undefined. Check the render method of 'App' Here is the code:

import React from 'react';
import { useState } from 'react';
import { Flatlist } from 'react-native';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {

  const[todos, setTodos] = useState([
{      text: 'buy coffee' , key: '1' },

{  text: 'learn Redux', key: '2' },

{ text: 'go to gym' , key: '3' }

  ]);

  return (
    <View style = {styles.container}>

{/*header */}

      <View style = {styles.content}>

        {/* to form */}


        <View style = {styles.list}>

          <Flatlist
          data = {todos}
          renderItem = {( {item} )=> ( 
              <Text>{item.text} </Text>
             )}
          
          />
        </View>
      </View>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {

    flex: 1,
    backgroundColor: '#fff'
  },
  content: {

    padding : 40, 



  }

});

Answer 1

You are using the wrong case for letter 'L' for FlatList

Change

import { Flatlist } from 'react-native';

To

import { FlatList } from 'react-native';

Also change

   <FlatList
      data = {todos}
      renderItem = {( {item} )=> ( 
          <Text>{item.text} </Text>
         )}
      
      />

Answer 2

Flatlist => FlatList

check data is not null or undefined

renderItem = {( {item} )=> (<Text>{item?.text ?? ''} </Text>)}