我正在開發一個必須從 Firestore 資料庫中獲取新訂單的應用程式，我曾經componentDidMount每 10 秒重繪 一次螢屏并啟動該fetchNewOrders函式，如果有新訂單可用，該函式應該將該物件推送到狀態陣列newOrder中，并顯示下面的 FlatList 中的訂單。當我啟動它回傳錯誤的代碼時TypeError: undefined is not an object (evaluating 'item.id')，我還撰寫了從資料庫中獲取的陣列示例。
螢屏
export default class Received extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
newOrder: [],
};
}
async componentDidMount() {
this.updateTimer = setInterval(() => {
this.fetchNewOrders();
}, 10000);
}
fetchNewOrders = async () => {
const querySnapshot = await getDocs(collection(db, path));
if(querySnapshot.length !== 0) {
querySnapshot.forEach((doc) => {
let array = this.state.newOrder;
const data = doc.data().order;
data.map(({obj, id}) => {
const filter = array.find(c => c.id === id);
if (filter == undefined) {
array.push(obj)
this.setState({ newOrder: array })
}
})
})
}
}
render() {
return (
<View>
<FlatList
data={this.state.newOrder}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return (
<TouchableOpacity>
<Text>{item.serviceRequested}</Text>
<View>
<Tex>${item.total}</Text>
</View>
</TouchableOpacity>
)
}}
/>
</View>
)
}
}
資料（新訂單）
Array [
Object {
"date": "Mon Feb 28 2022 11:24:14 GMT-0500 (EST)",
"id": 0.9436716663143794,
"instructions": "",
"order": Array [
/////////////
],
"paymentType": "Cash",
"serviceRequested": "Delivery",
"total": 10.4,
},
]
uj5u.com熱心網友回復：
setState 是一個異步函式，用于調度具有新狀態的渲染。每次渲染只能呼叫一次，而不是回圈呼叫。
const append = [];
querySnapshot.forEach((doc) => {
const data = doc.data().order;
// Is there bad data without ids?
data.filter(c => c.id && !this.state.newOrder.some(no => no.id === c.id))
.forEach((d) => append.push(d));
});
// Create the new state, then set it once.
this.setState({ newOrder: [...this.state.newOrder, ...append]});
uj5u.com熱心網友回復：
我建議先過濾您的資料（this.state.newOrder）。這將使您只顯示具有 id 的專案。
建議更改：
<FlatList
data={this.state.newOrder.filter((order)=>order.id)}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return (
<TouchableOpacity>
<Text>{item.serviceRequested}</Text>
<View>
<Tex>${item.total}</Text>
</View>
</TouchableOpacity>
)
}}
/>
以上是解決此問題的代碼，但我建議您確保 Firestore 僅在可能的情況下發送具有 id 的資料。顯然，這可能不在你的掌控之中，但我會確保 Firestore 為你提供可靠的資料，因為它可能會在未來引發更多問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/434337.html
標籤：javascript 数组 反应 反应式 筛选
上一篇：如何按Id更新嵌套陣列元素