Здесь я передаю URL в качестве реквизита для отображения загруженных файлов в режиме редактирования. Все, что я хочу, это не показывать никаких вложений, если URL-адрес пуст. Я могу видеть пустые вложения, как показано на рисунке:
export const FileUploader = ({ label, Url, setUrl, editMode }) => {
console.log("Url", Url);
const props = {
maxCount: 1,
onChange(info) {
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
}
},
fileList: [
Url ? {
uid: "1",
name: label + ".png",
status: "done",
response: '{"status": "success"}',
url: Url,
} : "",
],
};
Для радио:
<Radio value={"True"} checked={hasOutdoorSpace}>True</Radio>
<Radio value={"False"} checked={!hasOutdoorSpace}>False</Radio>
Для загрузки вам нужно использовать свойство defaultFileList
или fileList
. Ознакомьтесь с документацией здесь https://ant.design/components/upload/
Спасибо, что указали мне правильное направление @Andy. Я отредактировал свой вопрос, можете ли вы проверить его еще раз?
Я нашел обходной путь для решения этой проблемы.
Свойство fileList внутри props даст список (даже пустой), поэтому я использовал свойство showUploadList
внутри Upload и установил для него значение false, если длина fileList равна нулю.
Вот код:
import { Button, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { useState } from "react";
export const FileUploader = ({ label, Url, setUrl, editMode }) => {
console.log("Url", Url);
const fileList = [
Url
? {
uid: "1",
name: label + ".png",
status: "done",
response: '{"status": "success"}',
url: Url,
}
: {},
];
const fileExists = Object.keys(fileList[0]).length;
const props = {
maxCount: 1,
onChange(info) {
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
}
},
fileList: fileList,
};
const showUploadList = editMode ? true : false;
if(showUploadList){
showUploadList = fileExists > 0 ? true : false;
}
return (
<Upload {...props} customRequest={addFile} showUploadList={showUploadList}>
<Button icon={<UploadOutlined />}>Click to Upload (Max: 1) </Button>
</Upload>
);
};
Я понял, в чем проблема с переключателями, не могли бы вы прислать ссылку на код и ящик, потому что это очень большой код, и я думаю, что требуется рефакторинг, вы взяли слишком много состояний.