React - 仅当所有文件都已上传时才需要调用 final api

Question

我正在批量上传文件button.so我现在正在做的是将所有文件都放在 const fileContents 中，我正在迭代每个文件并调用上传 api

const fileContents = data.target.files;
      fileContents.forEach(file => {
        const data = new FormData();
        data.append('file', file);
        dispatch(UploadDispatcher(data));
      });
    }

并且在 reducer 中正在获取文件并触发上传 api

export const UploadDispatcher = data => dispatch => {
  performPost(UPLOAD_ENDPOINT, data)
    .then(response => {
      if (response.status === 200) {
        dispatch({
          type: GET_UPLOADED,
          payload: response,
        });

      } 
    })
    .catch(err => {
      dispatch({ type: ERROR, payload: err });

    });
};

并在调度中 GET_UPLOADED 并使变量为真

    case GET_UPLOADED: {
      return {
        ...state,
        successToast: true,
        uploaded: true,
      };
    }

并在组件中获取此变量并使用 useEffect

  useEffect(() => {
    if (uploaded) {
      callListApi();
    }
  }, [uploaded]);

但问题是如果有 5 个文件，在第一个文件上传后，它使变量为真并调用 callListApi。它不应该发生，在所有 5 个文件上传后它应该使标志为真并调用列表api（因为上传 api 需要时间才能得到响应）。我听说过 async await 等等，但不确定。有人可以帮忙

Answer 1

我认为你可以利用 Promise.all 来解决你的问题。

const fileContents = Object.keys(data.target.files).map(key=>data.target.files[key]);
dispatch(UploadDispatcher(fileContents));

export const UploadDispatcher = data => dispatch => {
 let promises = data.map(file=>{

        const formData = new FormData();
        formData.append('file', file);
        return performPost(UPLOAD_ENDPOINT, formData);

  })

    Promise.all(promises).then(response => {

        dispatch({
          type: GET_UPLOADED,
          payload: response,
        });


    })
    .catch(err => {
      dispatch({ type: ERROR, payload: err });

    });
};

Answer 2

尝试使用 Promise.all。将所有上传链接到一个数组，然后您可以等待所有上传都用 Promise.all.

解析

React - 仅当所有文件都已上传时才需要调用 final api

React - Need to call final api only if all files gets uploaded

javascript

reactjs

react-hooks

react-functional-component