使用 useState 和 useEffect 的列表中 updating/deleting 的这种设计好吗？

Question

我正在尝试创建一个 React 应用：

使用 socket.io
如果发送了 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*/)
}

现在，此代码以下列方式工作：

检查 'database' 中是否有 0 个项目，如果有，则向其中添加项目。

它没有做什么：

正在更新数据库中的项目
正在正确删除项目。有时它会删除项目，有时它什么都不做。

任何帮助都会很棒！

Answer 1

使用高阶函数来简化 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*/)
}

使用 useState 和 useEffect 的列表中 updating/deleting 的这种设计好吗？

Is this good design for updating/deleting from list using useState and useEffect?

database

node.js

socket.io

reactjs

use-effect