antd 在使用 fileList prop 时上传 customRequest onSuccess() 不会触发 onChange 。 onchange 卡在“上传”

Question

在下面的代码中，当我将 fileList 属性与 customRequest 属性一起使用时，info.file.status 停留在“上传”状态，它永远不会达到“完成”。但是当我在没有 fileList 道具的情况下使用时，它工作正常。如果有人可以帮助我，那将是一个很大的帮助。

export default function App() {
  const [fileList, setFileList] = useState([]);

  const onUploadChangeHandler = (info) => {
    console.log("onchange", info);
    if (info.file.status === "uploading") {
      console.log("uploading");
    }
    if (info.file.status === "done") {
      console.log("done", info);
      let newArr = [];
      let Location =
        "https://img.freepik.com/free-photo/purple-osteospermum-daisy-flower_1373-16.jpg?w=2000";
      let customFiledata = {
        uid: decodeURI(Location).slice(
          decodeURI(Location).indexOf("uqid") + 5,
          decodeURI(Location).lastIndexOf(".")
        ),
        name: decodeURI(Location).slice(
          decodeURI(Location).indexOf("uqid") + 5
        ),
        status: "done",
        url: Location
      };
      newArr[0] = customFiledata;
      setFileList(newArr);
    } else if (info.file.status === "error") {
      // message.error(`${info.file.name} file upload failed.`);
      console.log("error", info);
    }
  };
  const customRequestHandler = (info) => {
    console.log("customReq", info);
    const { file, onSuccess, onError } = info;
    onSuccess();
  };
  

  return (
    <div className="App">
      <Form layout="horizontal" form={form3} onFinish={onFinishHandler}>
        <div className="textarea_row">
          <Form.Item label="Passport Photo" name="passport_photo">
            <div>
              <Upload
                multiple={false}
                className="upload-list-inline"
                customRequest={customRequestHandler}
                fileList={fileList}
                maxCount={1}
                onChange={(info) => {
                  onUploadChangeHandler(info);
                }}
              >
                <Button icon={<UploadOutlined />}>Upload</Button>
              </Upload>
            </div>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
}

我期望用customRequest的Success()触发onChange，以便info.file.status==="uploading"更改为info.file.status ===“done”。

Answer 1

我刚刚在另一个问题中回答了这个问题：https://stackoverflow.com/a/78648075/4530520

问题是您将默认的

fileList

状态值设置为空数组。这在任何地方都没有提到，可能是 antd 或上传它所依赖的库中的一个错误。

像这样删除空数组：

 const [fileList, setFileList] = useState();

或者如果为空则将其作为未定义传递给上传组件

 <Upload
    fileList={fileList.length > 0 ? fileList : undefined}
 />