Не показывать список файлов в antd-Upload, если URL-адрес пуст

Здесь я передаю 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,
      } : "",
    ],
  };

Я понял, в чем проблема с переключателями, не могли бы вы прислать ссылку на код и ящик, потому что это очень большой код, и я думаю, что требуется рефакторинг, вы взяли слишком много состояний.

Priyen Mehta 11.11.2022 11:15
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
1
1
80
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Для радио:

<Radio value={"True"} checked={hasOutdoorSpace}>True</Radio>
<Radio value={"False"} checked={!hasOutdoorSpace}>False</Radio>

Для загрузки вам нужно использовать свойство defaultFileList или fileList. Ознакомьтесь с документацией здесь https://ant.design/components/upload/

Спасибо, что указали мне правильное направление @Andy. Я отредактировал свой вопрос, можете ли вы проверить его еще раз?

Anchal Gupta 14.11.2022 12:12
Ответ принят как подходящий

Я нашел обходной путь для решения этой проблемы.

Свойство 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>
  );
};

Другие вопросы по теме