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

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

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

我过滤了快照中的数据：

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

Answer 2

您正在创建超出范围的局部变量。如果您使用 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>
)