State useState 定義的變量在本機反應中不起作用

Question

有人可以找出這段代碼有什么問題嗎？ 從平面列表中一無所獲。 state 變量項也顯示 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;

控制台 output：

LOG表創建

LOG表創建

按下日志提交

LOG保存成功

LOG 獲取了 9 項

LOG 1.嘿嘿

LOG 2.m Gnutella 適合 n me gobo dl

日志 3. Fnch h gcc

日志 4. Geysgdsfsgd

日志 5. Dyrydydyd

日志 6. Vjvjvj

日志 7.Xbxbx

日志 8.Gdgx

日志 9.Xvxdh

錯誤類型錯誤：未定義不是 object（評估“val.item”）

Answer 1

您需要稍微更改 FlatList 和渲染列表，不要忘記大寫字母。 試試這個：

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

Answer 2

嘗試這樣的事情：

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