reactjs - 将正确的属性传递给弹出通知

Question

我想显示一个带有上传状态的通知。我接手了 React & ASP.NET 中的一个项目，我对此比较陌生。问题很简单，但我正在努力解决它:如何显示一个弹出通知，显示哪些文件已成功上传，哪些没有？

import * as React from "react";
import { connect } from "react-redux";
import { Form, Select, Button, Upload, message, notification} from 'antd';
import * as Actions from "../actions";

const FormItem = Form.Item;

class UploadFileForm extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
    }
    handleSubmit = (e) => {
        message.config({ top: 0 });
        message.loading('Importing in progress...', 3);
        e.preventDefault();
        this.props.uploadFile(this.props.form.getFieldsValue());
          notification["info"]({
          message: 'Files successfully uploaded',
          description: '', // <-- this line has to be modified
          duration: 10
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem label="File" >
                    {getFieldDecorator('upload', {
                        valuePropName: 'fileList',
                        getValueFromEvent: (e) => e.fileList.slice(-1)
                    })(
                        <Upload name="importFile" action={' '} multiple={false}>
                            <Button> Upload </Button>
                        </Upload>
                        )}
                </FormItem>
                <Button type="primary" htmlType="submit">Import</Button>
            </Form>
        );
    }
}
export default Form.create()(UploadFileForm);

更具体地说:我如何修改 description: '', 行以显示所有上传文件的列表及其纯文本状态，例如文件“1.txt”、“2.txt”和“3.txt”已成功上传。文件“4.txt”失败。?

项目文档说我们正在使用 Redux-Saga，但我不是这样，这可能让故事更简单。

Answer 1

我猜你的 this.props.uploadFile 方法是一个 promise 所以考虑到你应该在 promise 解决后显示通知

this.props.uploadFile(this.props.form.getFieldsValue()).then(result => {
    // since your client doesn't know which ones are success/failed, server should return
    // this information when request is finished

   const { successUploads, failUploads } = result;

    notification["info"]({
        message: 'Files successfully uploaded',
        description: `File(s) ${successUploads.join(', ')} have been successfully uploaded. File(s) ${failUploads.join(', ')} failed.`
        duration: 10
     });
});

如果您无法控制从服务器返回的内容，那么您需要在客户端跟踪上传，但这意味着有多个上传(请求)到服务器并且您的上传方法看起来像这样:

async function uploadFiles(files) {
    // I've called your server upload uploadService.send(), but replace this with your method
    const results = await Promise.all(
        files.map(file => uploadService.send(file))
             .map(p => p.catch(e => e)
    );

    let successUploads = [];
    let failUploads = [];
    results.forEach((result, idx) => {
        const file = files[idx];
        if (result instanceof Error) {
            failUploads.push(file);
        } else {
            successUploads.push(file);
        }
    });

    return {
        successUploads,
        failUploads
    }
}

然后您可以调用 uploadFiles，与第一个代码段中所示的方式相同。