javascript - 使用长时间运行的任务和合并状态来 react useEffect Hook

我有一个场景，用户可以使用拖放功能上传文件。

我将效果与空的空缺数组配合使用来设置RXJS订阅，该订阅处理已删除的文件和上载时间:

const [attachments, setAttachments] = useState([])

useEffect(() => {
    ...
    fileUploadSubject.subscribe(newAttachments => {
       setAttachments([...attachments,newAttachments])
    })
    ...
    return () => {
      subscriptions.forEach(s => {
        s.unsubscribe()
      })
    }
},[])

问题在于效果与attachments以及setAttachments函数有关。

如果我将attachments添加到依赖项数组，则将退订现有的上载。另外，由于其关闭，attachment状态不会在效果内更新。

我该如何解决这样的情况？我想到了多种方法，但似乎找不到简单的方法。

最佳答案

useState的setState函数支持functional updates形式:

const [attachments, setAttachments] = useState([])

useEffect(() => {
    ...
    const subscription = fileUploadSubject.subscribe(newAttachments => {
       setAttachments((oldAttachments) => [...oldAttachments, newAttachments])
    })
    ...
    return () => subscription.unsubscribe()
}, [setAttachments, fileUploadSubject])

在依赖关系列表中可以省略永不更改的功能(即，在此两个功能都可以)，但是我更愿意列出它们以防止忘记某些依赖关系。有eslint rules很难做到。