State useState 定义的变量在本机反应中不起作用

Question

Can someone please findout what is wrong in this code? Getting nothing from the flatlist. The state variable items is also showing null.

 import React, { useEffect, useState } from 'react'; import { FlatList, SafeAreaView, TextInput, Text, Button, Alert } from 'react-native'; import { openDatabase } from 'react-native-sqlite-storage'; const db = openDatabase({name: 'sqlitedb3 '}); const App = () => { const [text, setText] = useState(''); const [items, setItems] = useState([]); async function init() { await handleInit(); await handleFetch(); } useEffect(() => { init(); }, []) const handleInit = async() => { await db.transaction((txn) => { txn.executeSql('CREATE TABLE IF NOT EXISTS Items ('+ 'id INTEGER PRIMARY KEY AUTOINCREMENT,'+ 'item VARCHAR(30))', [], (tx, res) => { console.log('table created'); }) }) } const handleFetch = async() => { await db.transaction((txn) => { txn.executeSql('SELECT * FROM Items', [], (tx, res) => { let n = res.rows.length; console.log('fetched '+n+' items'); let result = []; for(let i = 0; i < n; i++) { result.push({id: res.rows.item(i).id, item: res.rows.item(i).item }); console.log(res.rows.item(i).id+". "+res.rows.item(i).item) } setItems(result); console.log('state.items: '+items.length) }) }) } const handleSubmit = async() => { console.log('submit pressed'); if(text === null || text === '') { Alert.alert('text input is blank'); return; } try { await db.transaction((txn) => { txn.executeSql('INSERT INTO Items (item) VALUES (?)', [text],async (tx, res) => { console.log('saved successfully'); setText(''); await handleFetch(); }) }) } catch(err) { console.log("can't submit") } } const renderlist = ({val}) => { return(<Text>{val.item}</Text>) } return( <SafeAreaView> <TextInput value={text} onChangeText={(val)=>setText(val)} /> <Button onPress={() => { handleSubmit() }} title='Submit'/> <Text>Hello</Text> <FlatList data={items} renderItem={renderlist} /> </SafeAreaView> ) } export default App;

console output:

LOG table created

LOG table created

LOG submit pressed

LOG saved successfully

LOG fetched 9 items

LOG 1. Heyy

LOG 2. m Gnutella fits n me gobo dl

LOG 3. Fnch h gcc

LOG 4. Geysgdsfsgd

LOG 5. Dyrydydyd

LOG 6. Vjvjvj

LOG 7. Xbxbx

LOG 8. Gdgx

LOG 9. Xvxdh

ERROR TypeError: undefined is not an object (evaluating 'val.item')

Answer 1

you need to change your FlatList& renderlist a bit, dont forget uppercases. try this instead:

 const RenderList = ({val}) => {
    return(<Text>{val.item}</Text>)
    
  }
<FlatList 
        data={items} 
        renderItem={({ item }) => (
        <RenderList val={item}
        />
      )}/>

Answer 2

Try something like this:

useEffect(() => {
    if(!items.length){
     init();
    }
  }, [items]);