一个关于 Ant Design 上传组件（setState, fileList, onRemove）的怪异问题

[phoenix-sky]

目标
1. 无论浏览器是否刷新，在图片列表中都显示已经上传成功的图片；
2. 正常删除图片列表中的图片，包含异步获取的，并向服务器发送请求。

目前存在的问题
1. 默认列表最多显示5张图片，但是上传1张新图片后，会替换所有异步获取的图片；
2. 删除新上传的图片后，后端接收不到请求，删除异步获取的图片却可以；
3. 删除某张异步获取的图片时，会删除所有异步获取的图片。

import "babel-polyfill";
import React from "react";
import axios from "axios";
import zhCN from "antd/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
// ******************************
import API from '../api/api';
import { LocaleProvider, Icon, Button, message, Upload } from "antd";
import "antd/lib/icon/style/css";
import "antd/lib/button/style/css";
import "antd/lib/message/style/css";
import "antd/lib/upload/style/css";
// ******************************
import "../assets/css/file-upload.css";

// 组件-语言设置
moment.locale("zh-cn");

// 组件-文件上传：开始
class FileUploadPhoto extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    };
    this.get = this.get.bind(this);
  }

  get() {
    let urlProp = "?applicantId=" + xxx.applicantId;
    let getUrl = API.xxx + urlProp;

    if (this.props.page === "xxx") {
      getUrl = API.xxx + urlProp;
    }

    axios.get(getUrl).then((res) => {
      if (res.data.code === "1000") {
        this.setState({
          fileList: [
            {
              uid: "1",
              id: "id-98000",
              name: "pho-98000.png",
              url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
            },
            {
              uid: "2",
              id: "id-16000",
              name: "pho-16000.png",
              url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
            },
          ],
        });
      }
    }).catch((err) => {
      console.log(err);
    });
  }

  componentDidMount() {
    this.get();
  }

  // 文件上传前验证：开始
  handleBeforeUpload = file => {
    let isImg = false;
    const isLtSize = file.size / 1024 / 1024 <= 2;

    if (file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg") {
      isImg = true;
    }

    if (!isImg) {
      message.error("请上传PNG/JPG/JPEG格式图片");
    }
    else {
      if (!isLtSize) {
        message.error("图片不能超过2M");
      }
    }

    return isImg && isLtSize;
  };
  // 文件上传前验证：结束

  handleChange = info => {
    let fileList = [...info.fileList];

    fileList = fileList.filter(file => {
      return (file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg") && file.size / 1024 / 1024 < 1;
    });

    console.log("fileList.length: " + fileList.length);

    if (fileList.length > 5) {
      message.error(`最多上传五张`);
      return false;
    }

    fileList = fileList.slice(-5);

    if (info.file.status !== "uploading") { }

    if (info.file.status === "done") {
      message.success(`${info.file.name} 上传成功`);

      if (info.file.response.code === "1000") {
        fileList = fileList.filter(file => {
          file = info.file;
          file.id = info.file.response.data;
          file.uid = info.file.response.data;
          return true;
        });
      }

    }
    else if (info.file.status === "error") {
      message.error(`${info.file.name} 上传失败`);
    }

    this.setState({ fileList });
  };

  handleRemove = (file) => {
    let uriProp = "?id=" + file.id;
    let uri = API.xxx + uriProp;

    if (this.props.page === "xxx") {
      uri = API.xxx + uriProp;
    }

    let options = {};

    return fetch(uri, options)
      .then((response) => {
        message.success(`${file.name} 删除成功`);
      }).catch((err) => {
        console.log(err);
      });
  };

  render() {
    let urlProp = "?xxx&applicantId=" + xxx.applicantId + "&type=xxx";
    let uploadUrl = API.xxx + urlProp;

    if (this.props.page === "xxx") {
      uploadUrl = API.xxx + urlProp;
    }

    const props = {
      action: uploadUrl,
      beforeUpload: this.handleBeforeUpload,
      onChange: this.handleChange,
      onRemove: this.handleRemove,
      multiple: false,
      name: "file",
      accept: "image/png,image/jpg,image/jpeg",
      className: "module-upload-file",
    };

    return (
      <LocaleProvider locale={zhCN}>
        <Upload {...props} fileList={this.state.fileList} >
          <Button><Icon type="upload" /> 图片上传</Button>
        </Upload>
      </LocaleProvider>
    );
  }
}
// 组件-文件上传：结束

export default FileUploadPhoto;

[囧]

上传后把数据覆盖了, 应该先合并新上传和旧的数据

this.setState({ fileList });

[phoenix-sky]

谁了解？

谢谢！

[phoenix-sky]

引用 2 楼 囧 的回复:

上传后把数据覆盖了, 应该先合并新上传和旧的数据

this.setState({ fileList });

旧数据是每成功上传一个文件，就要重新从后端获取的。
我对 React 不懂，如何修改？谢谢

[囧]

要重新获取就把 this.setState({ fileList }); 换成 this.get();