使用长时间运行的任务和合并状态来反应useEffect挂钩

Question

我有一个场景，用户可以使用拖放功能上传文件。我将效果与空的空缺数组配合使用来设置RXJS订阅，该订阅处理已删除的文件和上载时间：const [attachments, setAttachments] = useState([])useEffect(() => {    ...    fileUploadSubject.subscribe(newAttachments => {       setAttachments([...attachments,newAttachments])    })    ...    return () => {      subscriptions.forEach(s => {        s.unsubscribe()      })    }},[])问题是效果attachments与setAttachments功能以及功能都息息相关。如果添加attachments到依赖项数组，我将退订现有的上载。另外，attachment状态由于其关闭而不会在效果内部更新。我该如何解决这样的情况？我想到了多种方法，但似乎找不到简单的方法。

Answer 1

setState函数useState支持功能更新形式：

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

useEffect(() => {

    ...

    const subscription = fileUploadSubject.subscribe(newAttachments => {

       setAttachments((oldAttachments) => [...oldAttachments, newAttachments])

    })

    ...

    return () => subscription.unsubscribe()

}, [setAttachments, fileUploadSubject])

可以从不更改的功能（即此处两个功能）可以在依赖项列表中省略，但是我更喜欢列出它们，以免忘记某些依赖项。对此有严厉的规定。

Answer 2

如果我将附件添加到依赖项数组，我将退订现有的上载

不确定为什么取消订阅，不熟悉 fileUploadSubject.subscribe

另外，由于关闭状态，附件状态不会在效果内更新

您可以useReducer代替useState，而无需依赖效果中的状态。

也许是这样的：

function reducer(state, action) {

  switch (action.type) {

    case "ADD_ATTACH":

      return [...state, action.payload];

    default:

      throw new Error();

  }

}

function App() {

  const [attachments, dispatch] = useReducer(reducer, []);

  useEffect(() => {

    // ...

    fileUploadSubject.subscribe(newAttachments => {

      dispatch({ type: "ADD_ATTACH", payload: newAttachments });

    });

    // ...

    return () => {

      subscriptions.forEach(s => {

        s.unsubscribe();

      });

    };

  }, [/*fileUploadSubject?,  subscriptions? */]);

  return <div>{ /* some UI */ }</div>;

}

我仍然认为您的效果不依赖任何东西是很奇怪的，请确保subscriptions并且fileUploadSubject确实不应该将其放置在dependencies数组内。