将数据添加到我的 firebase firestore 后端数据库后重新渲染反应组件

Question

我有一个 react native 组件，它根据我的 firestore 数据库中有多少显示任务列表。它们最初在页面第一次渲染时被渲染。

用户可以添加任务，并且我希望在将新任务添加/更新到 firestore 数据库后，屏幕上的组件能够在屏幕上重新显示。任务是从我数据库中的任务集合中呈现的。

Firesstore Firebase 结构：

users(collection)-->tasks(collection)-->taskdata(document)

从后端请求任务并将其设置为它们所在类组件的本地状态。

constructor(props) {

        this.state = {

            tasks_: []
           
        }
}

在数据库的快照请求下获取给定用户 ID 的任务并将它们设置为本地状态。

getInfoHandler() {
        
          var docRefTest = 
            db.collection('users').doc(this.state.id).collection('tasks').get()
             .then(querySnapshot => {

              const documents = querySnapshot.docs.map(doc => doc.data());
              
              this.setState({ tasks_: documents });
        });

组件从本地状态检索任务并将它们呈现在页面上。根据存储在后端数据库中的任务映射它们。

在页面渲染时通过组件调用 getInfoHandler() 函数获取任务。

我希望每次自动添加任务时都呈现一个新组件。

export default class Tasks extends React.Component {

getInfoHandler() {

          var docRefTest = 
            db.collection('users').doc(this.state.id).collection('tasks').get()
             .then(querySnapshot => {

              const documents = querySnapshot.docs.map(doc => doc.data());

              this.setState({ tasks_: documents });
});

componentDidMount () {

   this.getInfoHandler();

}

render() {

        const tasks1 = this.state.tasks;

        return (
            <View style={styles.tasks}>
                        {tasks1.map((task) => {
                            return (
                                <TaskItem
                                    notes={task.notes}
                                    reminder={task.reminder}
                                    name={task.name}
                                    assigned={task.assigned}
                                
                                />
                            );
                        })}
                    </View>
                    
         )
     }
}

addTaskHandler() 用于将任务添加到后端。它位于不同的模态组件中，并在按钮提交和关闭模态时激活

addTaskHandler () {
 db.collection('users').doc(this.state.id).collection('tasks').doc().set({
            name: this.state.name,
            assigned: this.state.assigned,
            tag: this.state.tag
        })
    }

Answer 1

您需要结合使用useState、useEffect 和onSnapshot()（一个监听器）。在不提供所有细节的情况下（部分是因为我的代码具有“包装”函数层），它希望像这样的功能组件和钩子（强烈推荐超过组件类）：

export default function ShowThese(props) {
  const {id} = props;

  const [tasks_, setTasks_] = useState([]);

  useEffect(() => {
    return db
      .collection('users')
      .doc(id)
      .collection('tasks')
      .onSnapshot(
        (querySnapshot) => {
        // returns a promise
        if (!querySnapshot.empty) {
          // DataFromSnapshot is what ever code you use to get an array of data from
          // a querySnapshot   
          let dataArray = DataFromSnapshot(querySnapshot);
          setTasks_(dataArray);
        } else //whatever you choose to do when there are no records;
      },
      (err) => {
        //whatever you want to do in case of an error
      }
    );
  }, [id]); //

  return //whatever you choose to render;
}

几个注意事项：

.onSnapshot 返回一个取消订阅函数。 useEffect() 将在您的组件卸载时自动调用该函数 - 减少内存泄漏。如果id 发生变化，则有点依赖组件卸载/重新安装。

每次查询中的数据发生变化时，如果成功则调用(querySnapshot) =>{ 函数（从而更新tasks_），并在出错时调用(err) =>{ 函数。