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

我试图将从SQLDatabase提取的数据传递到另一个组件中，该组件将显示该数据。我不知道到底该怎么做

在我的App.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;

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 ();
  };

这将调用CustomList

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

但是，我需要一个实时同步数据库，它将在进行更改时更新CustomList

在mysqldata.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;

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 ();
  };

let helperray；
...
导出默认函数SQLData（）{
...
函数查询成功（发送，结果）{
...
helperArray=[]；
//检查数据集中的每个项目
for（设i=0；i

从上面的代码可以看出，我已经将从SQLDatabase提取的数据放入了一个变量helperArray。我想知道如何像“data.js”一样导入数据并以同样的方式输出！谢谢

如何实时地将数据从一个组件传递到另一个组件？
有几种方法可以做到这一点，其中一种是通过道具。从技术上讲，它不是实时的，但它非常接近，并且可能足够快，适合您的用例。
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}/>}
/>

因此，您希望在CustomList组件中获取helperArray的信息。您可以利用React在应用程序组件（或CustomList）中获取一次信息。装载阶段是在创建组件实例并将其插入DOM时：
如果需要从远程端点加载数据，。
从数据库接收数据后，将其设置为组件的状态。然后，如果要在应用程序组件中加载数据，请将返回语句更改为：

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

返回(
);

另一个问题是 但是，我需要一个实时同步数据库，它将在进行更改时更新CustomList

因此，这个问题的答案非常棘手，取决于您的技术堆栈。您可以托管一个后端应用程序，作为前端的REST控制器。 如果您不熟悉，它会是这样的
前端（React WebApp）更改数据并单击提交（或任何其他事件）->
前端将使用库（Axios.js在React中非常流行）向后端发出HTTP请求->
后端（Spring server/Node.js server等）接收到HTTP请求处理它，然后创建与DB（SQL、Mongo等）的连接->
然后，后端将使用该连接写入数据库（如果使用Spring JPA，则使用Node.js mssql）->
现在，数据库中有了更新的数据，下次有人访问前端应用程序时，它将请求从后端获取数据，然后用该数据填充页面。

---

您好！谢谢您的回答。我计划制作的是与本地数据库同步的东西。如果没有internet，数据将在连接到internet后同步。我仍然不知道如何准确获取变量“helperArray”从SQLData.js到CustomList.js我明白了！所以我实际上是在安装阶段通过调用App.js中的组件SQLData.js将SQLData.js导入到App.js中，并将生成的数据设置为CustomList的道具。我仍然对如何从SQLData.js调用和返回数据有点困惑。我已经更改了helperA将数组放入“const[helperArray，setArray]=useState（[]），并将数据放入其中。将代码从：导出默认函数SQLData（）移到某个组件的componentDidMount生命周期挂钩中。一旦填充了helperArray，组件就应该有一个状态setState（helperArray）将该组件的状态设置为helperArray的值。如果您在应用程序组件中进行了数据收集，请将状态作为道具传递给CustomList组件，如果您在CustomList组件中进行了数据收集，则数据处于您的状态。是否要将其分离到单独的文件中？我正在尝试使我的代码尽可能干净可能是因为我不必将太多函数塞进一个文件！JavaScript中的导出默认值将使其成为默认导出（显然我知道），因此您可以从“SQLData.js”中导入anyReferenceName；如果anyReferenceName可以是您想要的任何名称，则不需要是函数名。常规导出（非默认）需要通过名称引用，例如从“SQLData.js”导入{getData}。我建议在应用程序组件中导入它，就像将另一个组件作为应用程序的子组件一样（例如自定义列表），它很容易通过道具传递。如果将数据导入自定义列表，则可能会遇到问题。