Antd-Upload组件设置fileList属性时onChnage只执行到“uploading“状态引发的一些问题的解决方案_antd upload filelist

需求：文件上传失败时不需要回显。

思路：添加fileList属性，绑定一个列表，上传成功的文件才加入列表中，代码如下：
 

...  
const [ displayFileList, setDisplayFileList ] = useState<any[]>([]);
...
 
<Upload
    action="xxx"
    accept=".xls*, .csv"
    ...
    fileList={displayFileList}
    ...
    onChange={resp => {
        const _file = resp.file || {};
        if(_file.status!=="done") return
        // 上传成功
        if (_file.response?.status == 0) {
            const uid = _file.response?.uid || "";
            handleFileListChange([uid]);
        }else{
            notification["error"]({
                message: _file.response?.msg||"上传文件失败，请重新上传"
            });
        }
    }}
>

问题点（坑）：根本走不了done状态

解决方式：不废话，直接上关键代码

...  
const [ displayFileList, setDisplayFileList ] = useState<any[]>([]);
...
 
<Upload
    action="xxx"
    accept=".xls*, .csv"
    ...
    fileList={displayFileList}
    ...
    onChange={resp => {
        const _file:any = resp.file || {};
        if (_file.status == "uploading") {
            // 在这里设置一下需要展示的文件才会继续走到done状态
            setDisplayFileList([_file]);
            return;
        }else if (["removed","error"].indexOf(_file.status) !== -1) {
            // "removed","error"状态时也设置一下
            setDisplayFileList([]);
            return;
        }
        
        // done状态
        // 后端返回状态码为0证明上传成功
        if (_file.response?.status == 0) {
            const uid = _file.response?.uid || "";
        } else {
            notification["error"]({
                message: _file.response?.msg || "上传文件失败，请重新上传"
            });
        }
    }}
>

结果：思路基本如此，细节尚需打磨。