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

Question

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

我使用一个带有空 depedency 数组的效果来设置一个 RXJS 订阅来处理丢弃的文件和上传时间:

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

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

问题是效果依赖于 attachments 以及 setAttachments 函数。

如果我将 attachments 添加到依赖项数组，我将取消订阅现有的上传。此外，attachment 状态由于其关闭而不会在效果内部更新。

我该如何处理这种情况？我想过多种方法，但似乎找不到简单的方法。

Answer 1

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对于那个艰难。