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

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

有几种方法可以做到这一点，其中一种是通过道具。从技术上讲，它不是实时的，但是对于您的用例而言，它是接近的并且可能足够快。
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的数据变量的FlatList的地方。

      data = {data}

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

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

另一个问题是

但是，我想要一个实时同步数据库，该数据库将在进行任何更改时更新CustomList。

因此，答案非常棘手，取决于您的技术堆栈。您可以托管充当前端REST控制器的后端应用程序。如果您不熟悉，它会像这样
前端（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

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

1 个答案:

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

另一个问题是