开发者问题收集

useState 不起作用-React Native 和 SQLite

2022-03-28
258

我是 React Native 的新手,对代码中的错误深表歉意。我使用 React Native 和 SQLite(全部使用 expo)。

我的问题是“useState”在进入应用程序时不会保存数据,我必须手动更新应用程序(在 Visual Studio Code 中按 Ctrl + s)才能保存数据。我不知道为什么会发生这种情况,谁能告诉我问题出在哪里?

  • 控制台最初显示“数组 []”,更新后数据出现在数组内

编辑我的代码 :)

控制台(第一个) ->

use effect 0 ------> Array []
use effect 1 ------> null
ENCONTRADO de tb_user o ID_user, username, nome_empresa --->  SORAIA
ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null

控制台(第二个) ->

use effect 0 ------> Array [
  Object {
    "ID_veic_uso": 1,
  },
]
use effect 1 ------> null
ENCONTRADO de tb_user o ID_user, username, nome_empresa --->  SORAIA
ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null

控制台(第三个) ->

use effect 0 ------> Array [
  Object {
    "ID_veic_uso": 1,
  },
]
use effect 1 ------> 1
ENCONTRADO de tb_user o ID_user, username, nome_empresa --->  SORAIA
ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null
    const [dados, setDados] = useState([]);
    const [IDVeic, setIDVeic] = useState(null);

const findByUserna = (userna) => {
        return new Promise((resolve, reject) => {
            db.transaction((tx) => {
                //comando SQL modificável
                tx.executeSql(
                    "SELECT ID_user, username, nome_empresa FROM tb_user WHERE username = ?;",
                    [route.params.paramKey],
                    //-----------------------
                    (_, { rows }) => {
                    if (rows.length > 0) {
                        resolve(rows._array),
                        console.log('ENCONTRADO de tb_user o ID_user, username, nome_empresa ---> ',route.params.paramKey);
                    }else {
                        reject("Obj not found: id=" + userna),
                        console.log('NAO ENCONTRADO de tb_user o ID_user, username, nome_empresa');
                    } // nenhum registro encontrado
                    },
                    (_, error) => reject(error) // erro interno em tx.executeSql
                );
            });
        });
    };
    const findByV = (cont) => {
        return new Promise((resolve, reject) => {
            db.transaction((tx) => {
                tx.executeSql(
                    "SELECT ID_veic_uso FROM tb_veic_user WHERE username LIKE ? AND km_final IS NULL",
                    [route.params.paramKey],
                    //-----------------------
                    (_, { rows }) => {
                    if (rows.length > 0) {
                        resolve(rows._array),
                        console.log('ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null');
                    }else {
                        reject("Obj not found: v=" + cont),
                        console.log('NAO ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null');
                    }
                    } // erro interno em tx.executeSql
                );
            });
        });
    };




    useEffect(() => {
        findByUserna( route.params.paramKey )
        .then(
            findByV(route.params.paramKey)
            .then( 
                d => {
                    setDados(d)
                }
            )
        )
        .then(console.log('use effect 0 ------>',dados))
        .then( 
            dados.map(item => 
                setIDVeic(item.ID_veic_uso)
            ),
        )
        .then(console.log('use effect 1 ------>',IDVeic))
        
    },[])

每次我在 vs code 1 中保存文件时 useState 都有效

2个回答

statesetter 函数在 React Native 中是异步的。因此,如果在 useEffect 中设置状态对象后直接 console.log ,它将不会显示更新后的状态。

但是, state 更改将触发组件的重新渲染,并且框架保证 state 将在下一个渲染周期中包含更新后的值。

我们可以通过将 console.log 放在 useEffect 之外来验证这一点。

const [dados, setDados] = useState([]);
useEffect(() => {
            findByV(route.params.paramKey)
            .then( 
                d => {
                    setDados(d),
                },

            )
 },[])
console.log('data', dados)

我们会注意到两条日志消息。第一个是一个空数组,它是状态 dados 的初始值。 useEffect 有一个空的依赖数组,因此如果组件挂载,它将被触发一次。如果我们使用 setDados 设置新状态,它将触发新的渲染周期,整个组件将再次渲染。这次 useEffect 将不会被触发,但 state 包含新值。

David Scholz
2022-03-28

问题是我在代码末尾的条件中使用了 const 'data'(如果 'data' 不为空,则会呈现某些组件)。而这并没有读取 'IDVeic'

 return (
            <Image
                style={fundoVeic.imageLogo}
                source={require('../../imagens/aaa.png')}
            />
            {IDVeic === null ?
            <View>...</View>
            :
            <View>...</View
            }
Mares
2022-03-28