如何将数据从一个组件实时传递到另一个组件？

Question

I am trying to pass data that I pull from a SQLDatabase into another component that would display it. I'm not sure how to do it exactly...

In my App.js

This calls CustomList

import CustomList from './components/FlatList';
export default function App() {
  return(
    <CustomList />
  );
};

which

In my CustomList

import Data from './Data';
...
export default function CustomList() {
    //Sets up Getter , Setter , Initial Data
    const [data, setData] = useState(Data);
    ...

    return (
       <FlatList 
            ListHeaderComponent = {header}
            data = {data}
            keyExtractor = { (item) => (item.id).toString()}
            ItemSeparatorComponent = { () => <View style={styles.itemSeparator}></View>}
            contentContainerStyle={ {borderBottomColor:'grey', borderBottomWidth: 1} }
            renderItem = { ({item, index}) => <ListItem item={item} index={index}/>}
       />
...

The CustomList above works if I import hard-coded data below

In my Data.js

const Data = [
    {id: 1, text: 'Boadb'},
    {id: 2, text: 'Joe'},
    {id: 3, text: 'Jane'},
    {id: 4, text: 'John'},
    {id: 5, text: 'Janet'},
    {id: 6, text: 'Janet'},
    {id: 7, text: 'Janet'},
    {id: 8, text: 'Janet'},
];

export default Data;

However, I want a real-time syncing database that will update the CustomList whenever changes are made.

In my SQLData.js

let helperArray;
...
export default function SQLData() {
     ...
     function querySuccess(tx, results) {
         ...
         helperArray = [];
         //Go through each item in dataset
         for (let i = 0; i < len; i++) {
         let row = results.rows.item(i);
         helperArray.push(row);
      }
    ...
    return ();
  };

As you can see from the code above, I have put the data pulled from the SQLDatabase into a variable helperArray. I was wondering how do I import it similarly like 'Data.js' and have it output the same way! Thanks

Answer 1

How do I pass data from one component to another in realtime?

There are several ways of doing this, one of which is through props. It technically is not real time, but it is close and probably fast enough for your use case.
https://reactjs.org/docs/components-and-props.html
Good news: You are already doing this here:

 <FlatList ListHeaderComponent = {header} data = {data} keyExtractor = { (item) => (item.id).toString()} ItemSeparatorComponent = { () => <View style={styles.itemSeparator}></View>} contentContainerStyle={ {borderBottomColor:'grey', borderBottomWidth: 1} } renderItem = { ({item, index}) => <ListItem item={item} index={index}/>} />

Where you are passing data as a prop to FlatList referencing CustomList's data variable.

 data = {data}

So you want helperArray's information in the CustomList component. You could utilize React's Lifecycle to fetch the information once in your App Component's (or CustomList's) mounting phase . The mounting phase is when an instance of a component is being created and inserted into the DOM:
If you need to load data from a remote endpoint,componentDidMount is a good place to instantiate the network request .
Once you received the data from the DB, set it to your Component's state. Then if you are loading it in the App Component change your return statement to be:

 return( <CustomList data = {helperArray(the reference to the state )}/> );

Another question is

However, I want a real-time syncing database that will update the CustomList whenever changes are made.

So the answer to this is very tricky and will depend on your tech stack. You could host a back-end application that acts as a REST controller for your front end. If you are not familiar it would look like this
Front End (React WebApp) makes changes to data and clicks submit (or any other event) ->
Front End will use a library(Axios.js is very popular with React) to make a HTTP request to the backend ->
BackEnd (Spring server / Node.js server, etc.) receives that HTTP request processes it, then creates a connection with a DB (SQL, Mongo, etc.)->
Back End will then use that connection to write to the database (if using Spring JPA, is using Node.js mssql) ->
Now with your updated data in your DB, the next time someone visits your front end application it will make a request to get the data from your back end then populate the page with that data.

Here is another great answer to a similar question