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

Question

我正在尝试将从 SQLDatabase 中提取的数据传递到另一个显示它的组件中。我不确定该怎么做...
在我的 App.js
这调用了 CustomList

import CustomList from './components/FlatList';
export default function App() {
  return(
    <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}/>}
       />
...

如果我在下面导入硬编码数据，则上面的 CustomList 有效
在我的 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;

但是，我想要一个实时同步数据库，只要进行更改，它就会更新 CustomList。
在我的 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 ();
  };

从上面的代码可以看出，我已经把从 SQLDatabase 拉出来的数据放到了一个变量 helperArray 中。我想知道如何像“Data.js”一样导入它并以相同的方式输出!谢谢

Answer 1

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

有几种方法可以做到这一点，其中一种是通过 Prop 。从技术上讲，它不是实时的，但对于您的用例来说它很接近并且可能足够快。
https://reactjs.org/docs/components-and-props.html
好消息!你已经在这里这样做了:

<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}/>}
/>

您将数据作为 Prop 传递给 FlatList 引用 CustomList 的数据变量。

      data = {data}

因此，您需要在 CustomList 组件中获取 helperArray 的信息。你可以使用 React 的 Lifecycle在您的应用组件(或自定义列表)中获取信息一次 mounting phase .安装阶段是在创建组件实例并将其插入 DOM 时:
如果您需要从远程端点加载数据， componentDidMount is a good place to instantiate the network request .
从数据库接收到数据后，将其设置为组件的状态。然后，如果您在 App 组件中加载它，请将您的 return 语句更改为:

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

另一个问题是

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

所以这个问题的答案非常棘手，取决于你的技术堆栈。您可以托管一个后端应用程序，该应用程序充当前端的 REST Controller 。
如果你不熟悉，它看起来像这样
前端(React WebApp)对数据进行更改并单击提交(或任何其他事件)->
前端将使用一个库(Axios.js 在 React 中非常流行)向后端发出 HTTP 请求 ->
后端(Spring 服务器/Node.js 服务器等)接收到 HTTP 请求对其进行处理，然后创建与数据库(SQL、Mongo 等)的连接->
然后后端将使用该连接写入数据库(如果使用 Spring JPA，则使用 Node.js mssql)->
现在有了数据库中的更新数据，下次有人访问您的前端应用程序时，它将请求从您的后端获取数据，然后用该数据填充页面。
Here is another great answer to a similar question