Looking to retrieve information from a database transaction in a React Native application

Question

Looking to retrieve information from a database transaction in a React Native application

I am new to working with React Native and I am facing an issue in my main component where I am trying to execute a database query and retrieve the data. However, when I run it, the console logs 'undefined'. Can anyone help me solve this problem? Thank you.

Here is my main component:

const fetchData = async () => {
    let queryselect = 'SELECT * FROM tbl_messages ';
    var result = await selectData(queryselect);

    if (result === false) {
        console.log('no data');
    } else {
        console.log(result);
    }
}

In my database component:

var db = openDatabase({ name: 'message.db', createFromLocation: 1 });

db.transaction(tx => {
    tx.executeSql(
        query,
        [],
        (tx, results) => {
            var len = results.rows.length;
            if (len === 0) {
                console.log('no records found');
                return false;
            } else {
                var temp = [];
                for (let i = 0; i < results.rows.length; ++i) {
                    temp.push(results.rows.item(i));
                }
                return temp;
            }
        }
    );
});

}

javascript react-native

Answer 1

Answer №1

Here is a code snippet demonstrating the use of Promises:

export const fetchData = () => {
    return new Promise((resolve, reject) => {
        db.transaction(tx => {
            tx.executeSql(
                query,
                [],
                (tx, results) => {
                    var len = results.rows.length;
                    if (len == 0) {
                        console.log('No data found');
                        resolve(false);
                    } else {
                        var temp = [];
                        for (let i = 0; i < results.rows.length; ++i) {
                            temp.push(results.rows.item(i));
                        }
                        resolve(temp);
                    }
                }
            );
        });
    });
}

};

Also, here's an example of how to read and set results using React hooks:

const [data, setData] = useState([]);

const fetchDataAndSetData = async () => {
    const results = await fetchData();
    console.log(results)
    setData(results);
}

useEffect(() => {
    fetchDataAndSetData();
}, []);

Answer 2

Here is a code snippet demonstrating the use of Promises:

export const fetchData = () => {
    return new Promise((resolve, reject) => {
        db.transaction(tx => {
            tx.executeSql(
                query,
                [],
                (tx, results) => {
                    var len = results.rows.length;
                    if (len == 0) {
                        console.log('No data found');
                        resolve(false);
                    } else {
                        var temp = [];
                        for (let i = 0; i < results.rows.length; ++i) {
                            temp.push(results.rows.item(i));
                        }
                        resolve(temp);
                    }
                }
            );
        });
    });
}

};

Also, here's an example of how to read and set results using React hooks:

const [data, setData] = useState([]);

const fetchDataAndSetData = async () => {
    const results = await fetchData();
    console.log(results)
    setData(results);
}

useEffect(() => {
    fetchDataAndSetData();
}, []);

Looking to retrieve information from a database transaction in a React Native application

Answer №1

Similar questions

There seems to be an issue with the package not running at xxx:yy in React

When changing recipients in Firebase, the Javascript code fetches the same message multiple times even though there is only a single message stored in the database

Having trouble displaying the accurate model value in the alert

What is the best way to send an object key/value pair to a Vue template?

Utilizing React to Style Background Positions

Removing files from Dropzone.js uploaded form

Issue with ASP.NET Core Controller not properly receiving complete JavaScript array object from Ajax call

"Implementation of Google+ button causing the appearance of a horizontal scrollbar

The dynamic duo of web development: React and Bootstrap JavaScript

Guide on making an NPM package with a web worker integration

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

Issue in TypeScript where object properties may still be considered undefined even after verifying using Object.values() for undefined values

Troubleshooting issue: Asynchronous functionality not working with Ajax.BeginForm

How to modify values in a JSON array using JavaScript

AngularJS approach to binding window scroll

Utilizing Google Maps with WebGL to place multiple GLTF objects on a vector map based on geographical coordinates

Connecting with two instances of a socket.io client

How can Protractor find elements using non-HTML custom attributes?

Dealing with an input containing HTML code within its value (manipulating with jQuery)

Is there a way for my command to respond only when a bot is mentioned?