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

Question

我仍在为 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，因为这两个状态最初都是空数组。它需要某种刷新。

我敢肯定，有更有效的方法来对此进行编码，但我需要帮助才能理解，为什么我的数据在我第一次加载应用程序时没有正确显示，因为我运行这个问题反复出现。

Answer 1

您正在创建超出范围的局部变量。如果您使用的是 typescript 而不是 javascript.

，您将能够捕获此错误

您想像这样创建状态对象：

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

然后设置这些对象的值，如下所示：

    setSumPost(postproduktionsTage.reduce(function(a, b){
      return a + b;
    }, 0));

    setSumProd(produktionsTage.reduce(function(a, b){
      return a + b;
    }, 0));

然后你就可以随心所欲地使用它了：

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

Answer 2

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

我过滤了快照中的数据：

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]);

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

Why is my data not rendering appropriately?

javascript

react-native

api

rendering