React Native：遍历从firebase提取的数据数组仅呈现数组中的第一项答案

【问题标题】：React Native: Iterating through an array of data pulled from firebase only renders the first item in the arrayReact Native：遍历从firebase提取的数据数组仅呈现数组中的第一项
【发布时间】：2021-09-14 21:24:11
【问题描述】：

我的 useEffect() 函数正在从 firebase 检索数据，并且只在屏幕上呈现一个 <TaskItem/>。

我提取数据并将其存储在我的状态下的 temptasks 中，然后使用 map 渲染以显示每个项目的组件。

我的后端 firebase 中有五个项目，使用控制台日志我可以看到它们都已收到，但为什么只有第一个呈现。重新渲染页面显示所有 5 个。

useEffect(() => {
  if(userId!=='' && id !== userId)
     setId(userId);

  if (id !== '') {
    let counter = 0;
      db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
        const tempTasks = [];
          snapshot.forEach(
             doc => {
                var newData = doc.data();
                newData.id = doc.id;
                tempTasks.push(newData);
                setTasks(tempTasks);
             }
          )

        setTasks(tempTasks);
             
      });
  }
},[id, userId]);

<View style={styles.tasks}>
                    
                        {temptasks.map((task) => {
                            return (

                                <View style={{ margin: 4}}>
                                     <TaskItem/>
                                </View>
                            );
                        })}
                    </View>

【问题讨论】：

标签： javascript reactjs firebase react-native

【解决方案1】：

没有渲染，因为您使用相同的数组更新状态（它具有相同的引用）。您必须返回一个丰富的副本。

useEffect(() => {
  if(userId!=='' && id !== userId)
     setId(userId);

  if (id !== '') {
    let counter = 0;
      db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
        const tempTasks = [];
          snapshot.forEach(
             doc => {
                var newData = doc.data();
                newData.id = doc.id;
                tempTasks.push(newData);
                setTasks(tempTasks); // Not this
                setTasks([...tempTasks, newData]); // But this
             }
          )

        setTasks(tempTasks); // no effect
             
      });
  }
},[id, userId]);

【讨论】：

我收到 undefined 但是当我记录 tempTasks 时它似乎是空的？
对不起 setTasks([...tempTasks, newData]); // 但是这个
哦，是的，它正在创建一个对象

【解决方案2】：

虽然 Pierre 的答案工作得很好，但您可以通过使用 docs 数组和扩展 (...) 运算符来用更少的代码来做同样的事情：

db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
  const tempTasks = snapshot.docs.map(doc => {
    return { ...doc.data(), id: doc.id };
  })

  setTasks(tempTasks);         
});

甚至更短（尽管我们可能会在这一步中失去一些可读性）：

db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
  setTasks(snapshot.docs.map(doc => {
    return { ...doc.data(), id: doc.id };
  }));
});

【讨论】：