时间戳

首页 > 解决方案 > 为什么我的数据没有正确呈现？

javascript - 为什么我的数据没有正确呈现？

问题描述

我仍在为 React Natives 渲染顺序而苦苦挣扎。我正在获取 API，然后过滤这些数据，最后我正在操作数据。当我第一次加载应用程序时，只有当我在代码编辑器中保存时它才会正确显示数据。

我的简化代码：

const [data, setData] = useState([]);
const [sumPost, setSumPost] = useState(0);
const [sumProd, setSumProd] = useState(0);

useEffect(() => {
        const unsubscribe = db.collection("Dates").where("projektName", "==", Projektname).onSnapshot(snapshot => (
          setData(
            snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
            })))
        ))
        return unsubscribe;
      }, [])

const produktionsFilter = data.filter( x => 
      x.data.jobtype == "Produktion"
    );

const postFilter = data.filter( x => 
      x.data.jobtype == "Postproduktion"
    );

const terminFilter = data.filter( x =>
      x.data.jobtype == "Termin"
    );

let i;

    const addPostProdTage = () => {
      const post = [];
      const prod = [];
      for(i=0; i < postFilter.length; i++){
        const p = postFilter[i].data.alleTage.length;
        post.push(p)
      }
      for(i=0; i < produktionsFilter.length; i++){
        const l = produktionsFilter[i].data.alleTage.length;
        prod.push(l)
      }
      setSumPost(post.reduce(function(a, b){
        return a + b;
      }, 0));
      setSumProd(prod.reduce(function(a, b){
        return a + b;
      }, 0));
    }

useEffect(() => {
      addPostProdTage();
    }, [])

return(
<View>
   <Text>{sumPost}</Text>
   <Text>{sumProd}</Text>
</View>
)

sumProd 应该是 18，sumPost 应该是 3。现在两者都显示 0，因为这两个状态最初都是空数组。它需要某种形式的刷新。

我敢肯定，有更有效的编码方法，但我需要帮助来理解，为什么我的数据在我第一次加载应用程序时没有正确显示，因为我一遍又一遍地遇到这个问题。

标签： javascriptreact-nativeapirendering

解决方案

感谢我在这里得到的所有建议，所以为了将来参考，这就是我解决这个问题的方法：

我过滤了快照中的数据：

useEffect(() => {
    const post = db
      .collection("Dates")
      .where("projektName", "==", Projektname)
      .where("jobtype", "==", "Postproduktion")
      .onSnapshot((snapshot) =>
        setPost(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
    return post;
  }, []);

我有不必要的步骤来进行计算。我可以将其简化为一个函数：

const revData = () => {
    setSumPost(
      post.reduce(function (prev, cur) {
        return prev + cur.data.alleTage.length;
      }, 0)
    );
  };

最后，在使用依赖数组获取数据后，我有一个 useEffect 调用该函数：

useEffect(() => {
    revData();
  }, [post]);

推荐阅读