为什么我的数据没有正确呈现?
Why is my data not rendering appropriately?
我仍在为 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,因为这两个状态最初都是空数组。它需要某种刷新。
我敢肯定,有更有效的方法来对此进行编码,但我需要帮助才能理解,为什么我的数据在我第一次加载应用程序时没有正确显示,因为我 运行这个问题反复出现。
您正在创建超出范围的局部变量。如果您使用的是 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>
)
感谢我在这里得到的所有建议,为了将来参考,我是这样解决这个问题的:
我过滤了快照中的数据:
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]);
我仍在为 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,因为这两个状态最初都是空数组。它需要某种刷新。
我敢肯定,有更有效的方法来对此进行编码,但我需要帮助才能理解,为什么我的数据在我第一次加载应用程序时没有正确显示,因为我 运行这个问题反复出现。
您正在创建超出范围的局部变量。如果您使用的是 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>
)
感谢我在这里得到的所有建议,为了将来参考,我是这样解决这个问题的:
我过滤了快照中的数据:
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]);