我正在嘗試創建一個 React 應用程式：
- 使用 socket.io 從后端向前端發送資料（json 訊息）
- 如果發送了相同的 json 訊息，則更新現有串列
這就是我現在實施它的方式，但我不確定這是否是一種好的設計方法，或者是否有更好的方法來實作我想做的事情。
function App(){
const [database, setDatabase] = useState([])
useEffect(() => {
socket.on('incoming_data', (data) => {
setDatabase((currentList) => {
if (currentList.length > 0){ //only check for update/delete if more than 1 item present
let exists = !!currentList.find((item) => item.ID === data.ID)
if (exists){ //if new item exists in database list
if (data.deleteFlag === true){ // incoming data will have a json field declaring whether to delete or not
//deleting item
var item = currentList.find(itm => itm.ID === data.ID)
let ind = currentList.indexOf(item)
return (currentList.splice(ind,1))
}
else{ // else if delete flag is not true... update fields
var item = currentList.find(itm => itm.ID === data.ID)
let ind = currentList.indexOf(item)
if (item.dataField !== data.dataField){
currentList[ind].dataField = data.dataField
}
return (currentList)
}
}
//if incoming data doesnt exist in list, add to it
else{ return([...currentList, data]) }
}
}
// if there are 0 items in list, add to list
else { return ([...currentList, data]) }
})
}, [socket])
return(/*using map to display list in front end*/)
}
現在，此代碼以以下方式作業：
- 檢查“資料庫”中是否有 0 個專案，如果有，則向其中添加專案。
它沒有做什么：
- 更新資料庫中的專案
- 正確洗掉專案。有時它會洗掉專案，有時它什么也不做。
任何幫助都會很棒！
uj5u.com熱心網友回復：
我認為現代 JavaScript 中有一些功能可以幫助您簡化這里的事情。
例如，我看到您正在使用Array.find以查看是否存在某些內容。有一個函式可以做到這一點，Array.some.
如果您需要專案是唯一的，您可以嘗試將它們存盤為由專案 ID 鍵控的物件。React 的狀態對此可以很好地作業，并且在物件中查找內容就像 一樣簡單database[data.ID]，但需要注意的是，您每次都需要制作專案的副本，const newData = { ...data }以便您可以使用需要不變性的代碼。
如果您真的想深入研究，像這樣的方法Array.reduce可能會通過一些重構作業幫助您真正簡化此處的代碼。
希望有些幫助 ：）
哦，還有一種特殊的物件，稱為 a Set（而不是Object或Array），它可能適合您的需要，但請再次確保遵循不變性規則。
uj5u.com熱心網友回復：
使用高階函式來簡化代碼，如 filter、findIndex 等。
使用 findIndex 方法檢查專案是否存在并使用相同的索引更新 currentList。
使用過濾器功能從串列中洗掉專案。
function App() {
const [database, setDatabase] = useState([])
useEffect(() => {
socket.on('incoming_data', (data) => {
setDatabase((currentList) => {
if (currentList.length > 0) { //only check for update/delete if more than 1 item present
// Use same index to find item
let itemIndex = currentList.findIndex((item) => item.ID === data.ID)
if (itemIndex !== -1) { //if new item exists in database list
if (data.deleteFlag === true) { // incoming data will have a json field declaring whether to delete or not
// use filter for delete
return currentList.filter((item) => item.ID !== data.ID);
}
else {
let item = currentList[itemIndex]
const newItem = { ...item, dataField: data.dataField }
if (item.dataField !== newItem.dataField) {
currentList[itemIndex] = newItem;
return [...currentList]; // Set new value for updates
}
return (currentList)
}
}
//if incoming data doesn't exist in list, add to it
else { return ([...currentList, data]) }
}
// if there are 0 items in list, add to list
else { return ([...currentList, data]) }
});
});
}, [socket])
return (/*using map to display list in front end*/)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400183.html
標籤：节点.js 反应 数据库 socket.io 使用效果
上一篇：java.sql.SQLIntegrityConstraintViolationException：鍵“login.PRIMARY”的重復條目“null”
下一篇：MySQL-從約束名稱中查找表