React JS: Как я могу создать и разрешить пользователю загружать txt-файл из двух вложенных массивов объектов?

#javascript #reactjs

#язык JavaScript #реагирует на

Вопрос:

У меня есть массив объектов проданных единиц и массив объектов обслуживаемых единиц. Я пытаюсь отобразить каждую проданную единицу, а затем любые цены на услуги (если таковые имеются) ниже проданной единицы с соответствующими номерами VIN.

Мне удалось заставить это работать и войти в консоль, а также отобразить на веб-странице (я знаю, что приведенный ниже код действительно уродлив.. просто пытаюсь получить текстовый файл на данный момент):

 lt;Column style={{ width: "100%" }}gt;  lt;h3gt;Sold Units and Associated Service ROslt;/h3gt;  lt;pgt;  Sold Count: {soldCount} | Serviced RO Count: {servicedCount}  lt;/pgt;  lt;br /gt;  lt;Button onClick={download}gt;Download txtlt;/Buttongt;  lt;br /gt;  lt;br /gt;  {soldVinList.map((soldUnit) =gt; {  let VIN = soldUnit.VIN;  soldCount  = 1;  return (  lt;ClickableTile style={{ marginBotton: "5px" }}gt;  lt;div key={soldUnit.VIN}gt;  lt;h4gt;Sold VIN: {soldUnit.VIN}lt;/h4gt;  lt;pgt;Sold Count: {soldCount} lt;/pgt;  lt;pgt;Stock Number: {soldUnit.StockNo}lt;/pgt;  lt;pgt;Vehicle: {soldUnit.Vehicle}lt;/pgt;  lt;pgt;Purchase Date: {soldUnit.purchaseDate}lt;/pgt;  lt;pgt;Customer: {soldUnit.Name}lt;/pgt;  lt;pgt;  Location: {soldUnit.City}, {soldUnit.State}  {soldUnit.ZipCode}  lt;/pgt;  lt;pgt;Email: {soldUnit.Email} lt;/pgt;  lt;pgt;Home: {soldUnit.HomePhone}lt;/pgt;  lt;pgt;Cell: {soldUnit.CellPhone}lt;/pgt;  lt;pgt;Work: {soldUnit.WorkPhone}lt;/pgt;  lt;br /gt;  lt;ulgt;  amp;nbsp;lt;h4gt;Serviced:lt;/h4gt;  lt;pgt;Number of ROs:lt;/pgt;  lt;br /gt;  lt;ulgt;  {servicedVinListDT.map((servicedUnit) =gt; {  let VIN = servicedUnit.VIN;  let RO = servicedUnit.RO;  servicedCount  = 1;   if (servicedUnit.VIN === soldUnit.VIN) {  return (  lt;divgt;  lt;ligt;  lt;pgt;amp;nbsp;amp;nbsp;RO #: {servicedUnit.RO}lt;/pgt;   lt;pgt;  amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;Serviced  VIN:amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;{" "}  {servicedUnit.VIN}  lt;/pgt;   lt;pgt;  amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;RO  Date:amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;{" "}  {servicedUnit.RODate}  lt;/pgt;   lt;pgt;  amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;OPCode(s):amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;  {servicedUnit.LaborOp}  lt;/pgt;  lt;br /gt;  lt;br /gt;  lt;/ligt;  lt;/divgt;  );  }  })}  lt;/ulgt;  lt;/ulgt;  lt;br /gt;  lt;br /gt;  lt;br /gt;  lt;br /gt;  lt;/divgt;  lt;/ClickableTilegt;  );  })}  lt;/Columngt;  

Но затем я хочу предоставить пользователю возможность загрузить текстовый файл с той же информацией. Мне удалось получить кнопку для загрузки текстового файла при нажатии, но она всегда не определена, пуста или запятая и т. Д. Это самая последняя попытка:

 const element = document.createElement("a"); const file = new Blob(  soldVinList.map((soldUnit) =gt; {  soldCount  = 1;  console.log(soldUnit);  servicedVinListDT.map((servicedUnit) =gt; {  servicedCount  = 1;  if (servicedUnit.VIN === soldUnit.VIN) {  return (  "nn"    soldUnit.VIN    "n"    soldUnit.StockNo    "n"    soldUnit.Vehicle    "n"    soldUnit.purchaseDate    "n"    soldUnit.Name    "n"    "n amp;nbsp;"    servicedUnit.RO    "n"    "amp;nbsp;"    servicedUnit.VIN    "n"    "amp;nbsp;"    servicedUnit.RO    "n"    "amp;nbsp;"    servicedUnit.LaborOp    "n"    "n"  );  }  });  }) ); element.href = URL.createObjectURL(file); setFileDownloadUrl(fileDownloadUrl); element.download = "soldAndServiceList"; document.body.appendChild(element); element.click(); URL.revokeObjectURL(fileDownloadUrl); setFileDownloadUrl("");  

};

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