Gökhan Geyik所说的解决方案是正确的。但是我不得不稍微调整一下我的代码，因为我的Firebase数据库结构不同。问题是，重新招标！
首次使用react和firebase实时数据库。我很难提取数据并将其插入常量项中。根据我的理解，firebase代码是异步的，因此代码将在页面加载后执行。
在多次检查控制台之后，我看到数据加载到consttasks数组中。但是，当我将tasks[]中的数据放入items数组(标题、副标题等(时，它不会显示。我已经研究了多种解决方案，但都没有回答我的问题。
我以为这是因为项是常量，但在将其更改为var后，问题仍然存在。任何形式的指导都将不胜感激。
一个小提示：使用wait似乎对我根本不起作用。我可能是因为我缺乏对火球+反应的了解而把事情搞混了。
const Timelines = () => {
const [tasks, setTasks] = useState([]);
useEffect(() => {
const ref = firebase.database().ref();
const listener = ref.on('value', snapshot => {
const fetchedTasks = [];
snapshot.forEach(childSnapshot => {
const key = childSnapshot.key; //using await here doesn't work. Return 'await is a reserved word error'
const data = childSnapshot.val(); //using await here doesn't work. Return 'await is a reserved word error'
fetchedTasks.push({ id: key, ...data });
});
setTasks(fetchedTasks);
});
return () => ref.off('value', listener);
}, [firebase.database()]);
const items = [{
title: "Header" + tasks,
cardTitle: "Title",
//url: "http://www.history.com",
cardSubtitle: "LA",
cardDetailedText: ["Paragrah"],
media: {
type: "IMAGE",
source: {
url: "./images/image1.jpeg"
}
}
},
{
title: "Title",
cardTitle: "Title1",
//url: "http://www.history.com",
cardSubtitle: "LA",
cardDetailedText: "Paragraph 1",
media: {
type: "IMAGE",
source: {
url: "./images/img-2.jpg"
}
}
},
]
return (
<div className='timeline' style={{ width: "auto", height: "auto" }}>
<Chrono items={items}
slideShow
mode="VERTICAL_ALTERNATING"
theme={{
primary: "#7e8083",
secondary: "white",
cardBgColor: "#00467f",
cardForeColor: "white",
titleColor: "#00467f"
}}
useReadMore="true" />
</div>
)
};
export default Timelines;
您的问题可能是重新绘制问题。所以您可以尝试加载状态。检查我的useEffect并返回。
const Timelines = () => {
const [tasks, setTasks] = useState([]);
const [loading, setLoading] = useState(false); //<----
useEffect(() => {
setLoading(true) //<-----
const ref = firebase.database().ref();
const listener = ref.on('value', snapshot => {
const fetchedTasks = [];
snapshot.forEach(childSnapshot => {
const key = childSnapshot.key; //using await here doesn't work. Return 'await is a reserved word error'
const data = childSnapshot.val(); //using await here doesn't work. Return 'await is a reserved word error'
fetchedTasks.push({ id: key, ...data });
});
setTasks(fetchedTasks);
setLoading(false) //<---
});
return () => ref.off('value', listener);
}, [firebase.database()]);
const items = [{
title: "Header" + tasks,
cardTitle: "Title",
//url: "http://www.history.com",
cardSubtitle: "LA",
cardDetailedText: ["Paragrah"],
media: {
type: "IMAGE",
source: {
url: "./images/image1.jpeg"
}
}
},
{
title: "Title",
cardTitle: "Title1",
//url: "http://www.history.com",
cardSubtitle: "LA",
cardDetailedText: "Paragraph 1",
media: {
type: "IMAGE",
source: {
url: "./images/img-2.jpg"
}
}
},
]
return !loading && (
<div className='timeline' style={{ width: "auto", height: "auto" }}>
<Chrono items={items}
slideShow
mode="VERTICAL_ALTERNATING"
theme={{
primary: "#7e8083",
secondary: "white",
cardBgColor: "#00467f",
cardForeColor: "white",
titleColor: "#00467f"
}}
useReadMore="true" />
</div>
)
};
export default Timelines;
谢谢
useEffect(() => {
setLoading(true)
const ref = firebase.database().ref('Overview/events');
const listener = ref.on('value', snapshot => {
const fetchedTasks = [];
const data = snapshot.val();
fetchedTasks.push(data);
setTasks(fetchedTasks);
setLoading(false)
});
return () => ref.off('value', listener);
}, [firebase.database()]);
return !loading && (
....
)
这很有魅力。格伊克的正确方向值得高度赞扬！