DEV Community

Lam trien dong
Lam trien dong

Posted on

React Native Login connect with sql server ?

I created a Login application that connects to the sql server using Visual Studio Code. The Login and SignUp application logs into the sql server to read the Table 'TABUSERNAME' and export it to the grid, but I get an error, my computer's sql server information:

user: 'sa'
pass: 'Coffee'
server:'MICROSOFT' or '192.168.1.100'
database: 'Cafe'

ERROR Cannot convert null value to object, Can you please fix my code errors ?

File: App.js
Code:
`//App.js
import React, { useState } from 'react';
import { StyleSheet, View, TextInput, Button, FlatList, Text } from 'react-native';
import SQLite from 'react-native-sqlite-storage';
//import axios from 'axios';

const App = () => {
// Kh?i t?o state ?? l?u tr? thông tin ng??i dùng
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const [sqliteData, setSqliteData] = useState([]); // Thêm 'sqliteData' vào danh sách các state

// Hàm x? lý khi ng??i dùng nh?n nút Login
const handleLogin = async () => {

//console.log('login1');
try {
  // K?t n?i ??n c? s? d? li?u
  const db = SQLite.openDatabase(
    {          
      name: 'Cafe.db',
      location: 'default',
      //createFromLocation: '~www/test.db',
    },
    () => {
      console.log('Connected to the database.');
    },
    (error) => {
      console.error('Failed to connect to the database.', error);
    }
  );

  // Th?c hi?n truy v?n SQL ?? l?y d? li?u t? b?ng
  db.transaction(tx => {
    tx.executeSql(
      'SELECT * FROM TABUSERNAME',
      [],
      (_, result) => {
        if (result.rows) {
          const rows = result.rows.raw();
          setSqliteData(rows); // L?u tr? d? li?u t? SQLite vào state 'sqliteData'
        } else {
          console.log('No rows returned from the query.');
        }
      },
      error => {
        console.error('Failed to execute query.', error);
      }
    );
  });

  // ?óng k?t n?i c? s? d? li?u khi không s? d?ng n?a
  //return () => {
  db.close();
  console.log('Database connection closed.');
  //};

} catch (error) {
  console.error(error.message);
}
Enter fullscreen mode Exit fullscreen mode

};

// Hàm x? lý khi ng??i dùng nh?n nút Signup
const handleSignup = async () => {
try {
//
} catch (error) {
console.error(error.message);
}
};

return (

  <View style={styles.list}>
    {/* Hi?n th? d? li?u trong ô l??i */}
    <FlatList
      data={sqliteData}
      renderItem={({ item }) => <Text>{JSON.stringify(item)}</Text>}
      keyExtractor={(_, index) => index.toString()}
    />
  </View>

  <View style={styles.inputText}>
    <View style={styles.text}>
     <View style={styles.user}>
     {/* H?p v?n b?n ?? ng??i dùng nh?p tên ng??i dùng */}
        <TextInput placeholder="Username" onChangeText={setUsername} />
     </View>
     <View style={styles.pass}>
        {/* H?p v?n b?n ?? ng??i dùng nh?p m?t kh?u */}
        <TextInput placeholder="Password" onChangeText={setPassword} secureTextEntry={true} />
     </View>
    </View>



    <View style={styles.button}>
      <View style={styles.login}>
          {/* Nút ?? th?c hi?n ch?c n?ng ??ng nh?p */}
          <Button title="Login" onPress={handleLogin} />
      </View>
      <View style={styles.signup}>
          {/* Nút ?? th?c hi?n ch?c n?ng ??ng ký */}
          <Button title="Signup" onPress={handleSignup} />
      </View>
    </View>
  </View>



</View>
Enter fullscreen mode Exit fullscreen mode

);
};

export default App;

const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor : '#e7feff',

},
list: {

},
inputText : {
top: 340,

},
text : {
marginLeft : 30,
},

button : {
width : 360,
height : 150,
marginHorizontal : 20,
justifyContent : 'center',

},
login : {

},

signup : {
top : 20,

},

})`

File: server.js
Code:

`// server.js
const express = require('express');
const bodyParser = require('body-parser');
const sql = require('mssql');

const app = express();
const port = 3000;

app.use(bodyParser.json());

const config = {
user: 'sa',
password: 'Coffee',
server: 'MICROSOFT',
database: 'Cafe',
};

app.post('/login', async (req, res) => {
try {
await sql.connect(config);
const result = await sql.query(SELECT * FROM TABUSERNAME WHERE USERNAME='${req.body.username}' AND PASSWORDS='${req.body.password}');
sql.close();
res.json(result.recordset);
} catch (error) {
res.status(500).send(error.message);
}
});

app.listen(port, () => {
console.log(Server is running on port ${port});
});`

See attached image file

Image description

Image description

Top comments (0)