React上传XML后分页面显示完整表格的实现方案咨询

• 正在开发React应用，已实现XML文件上传功能，上传后文件内容会解析并展示在表格中。需求为：首页面仅显示表格前5列数据，点击“See More”按钮跳转至新页面展示完整表格。目前跳转后仅能看到表头，无法显示上传文件解析后的表格数据。
• 尝试使用localStorage实现全局数据存储但未成功，也考虑过用Redux共享数据，但不清楚如何将上传文件的解析内容全局存储以在新页面获取。
• 咨询：是否可以使用Multer存储用户上传的文件？这类场景的最优实现方案是什么？

import React, { useEffect } from "react";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { XmldataPostRoute } from "../../api/xmldataPost";
import { xmlDataAction } from "../../Actions/PostAction";
import { Button } from "@mui/material";
import Link from "next/link";
import Fulltable from "./Fulltable";

const TableXml = () => {
  const columnsTable = [
    { id: "CreatedDatetime", label: "Created Datetime", minWidth: 170 },
    {
      id: "AddressLineText",
      label: " SUBJECT_PROPERTY AddressLine Text",
      minWidth: 100,
    },
   {
      id: "StateCode",
      label: "StateCode",
      minWidth: 170,
    },
    {
      id: "UnparsedLegalDescription",
      label: "Unparsed Legal Description",
      minWidth: 170,
    },
    {
      id: "CommunityPropertyStateIndicator",
      label: "Community Property State Indicator",
      minWidth: 170,
    },
    {
      id: "FHASecondaryResidenceIndicator",
      label: "FHA Secondary Residence Indicator",
      minWidth: 170,
    },
    {
      id: "FinancedUnitCount",
      label: "Financed Unit Count",
      minWidth: 170,
    },
    {
      id: "PropertyEstateType",
      label: "Property Estate Type",
      minWidth: 170,
    },
    {
      id: "PropertyExistingCleanEnergyLienIndicator",
      label: "Property Existing Clean Energy LienIndicator",
      minWidth: 170,
    },
   
    {
      id: "PartyRoleType",
      label: "Party Role Type",
      minWidth: 170,
    },


// There were more than 14 columns, I have removed it from here to shorten the code
  ];

  let fileReader;
  const handleFileChosen = (file) => {
    fileReader = new FileReader();
    fileReader.onloadend = handleFileRead;
    fileReader.readAsText(file);
  };

  const dispatch = useDispatch();

  const [xml, setxml] = useState();
  const [rowopen, setrowopen] = useState(false);
  const handleFileRead = (e) => {
    const content = fileReader.result;
    console.log(content); //string xml
    var parser = new DOMParser();
    var xmlDoc2 = parser.parseFromString(content, "application/xml");
    console.log(xmlDoc2); //xml dom
    setxml(xmlDoc2);
    console.log(xml, "bhai main");
    setrowopen(true);
    
    const data = Datasender(xmlDoc2);
    dispatch(xmlDataAction(data));
    console.log(data);
  };
  const [ivar, seti] = useState(0);
  const [showMore, setShowMore] = useState();
  const Datasender = (xml) => {
    const datatosend = {};
    columnsTable.map((column) => {
      const label = column.label;

      if (label == "SUBJECT_PROPERTY AddressLine Text") {
        return (datatosend[`${label}`] = xml.getElementsByTagName(
          `${column.id}`
        )[0].childNodes[0].nodeValue);
      } else if (label == "RESIDENCE Address Line Text") {
        return (datatosend[`${label}`] = xml.getElementsByTagName(
          `${column.id}`
        )[1].childNodes[0].nodeValue);
      }
      datatosend[`${label}`] = xml.getElementsByTagName(
        `${column.id}`
      )[0].childNodes[0].nodeValue;
    });
    return datatosend;
  };


// I tried using localStorage
  // useEffect(() => {
  //   const data = window.localStorage.getItem("Full_Table");
  //   setrowopen(JSON.parse(data));
  // }, []);
  // useEffect(() => {   
  //   window.localStorage.setItem("Full_Table", JSON.stringify(rowopen));
  // }, [rowopen]);


  
  return (
    <div>
      <Link href="/dashboard/Fulltable">
        <Button
          onClick={() => {
            setShowMore(!showMore);
          }}
        >
          See More
        </Button>
      </Link>

      <div>
        <input
          style={{
            backgroundColor: "#5048E5",
            color: "white",
            border: "1px solid rgba(255,255,255,0.3)",
          }}
          type="file"
          id="file"
          className="input-file"
          accept=".xml"
          onChange={(e) => handleFileChosen(e.target.files[0])}
        />
      </div>
      <div
        className="tablecontainer"
        style={{ width: "100vw", overflow: "auto" }}
      >
        {showMore ? (
          <Fulltable />
        ) : (
          <table>
            <tr>
              {columnsTable
                .filter((item, index) => index < 5)
                .map((column) => {
                  return (
                    <th
                      style={{
                        minWidth: "150px",

                        border: "1px solid rgba(255,255,255,0.3)",
                        minHeight: "20px",
                        borderRight: "none",
                      }}
                    >
                      {column.label}
                    </th>
                  );
                })}
            </tr>
            {rowopen ? (
              <tr>
                {columnsTable
                  .filter((item, index) => index < 5)
                  .map((columns) => {
                    if (
                      columns.label == "SUBJECT_PROPERTY AddressLine Text" &&
                      ivar == 0
                    ) {
                      var value =
                        xml.getElementsByTagName(`AddressLineText`)[0]
                          .childNodes[0].nodeValue;
                      seti(1);
                      return (
                        <div>
                          <td
                            style={{
                              textAlign: "center",
                              minWidth: "150px",
                              border: "1px solid rgba(255,255,255,0.3)",
                              minHeight: "20px",
                              borderRight: "none",
                              borderTop: "none",
                            }}
                          >
                            {`${value}`}
                          </td>
                        </div>
                      );
                    } else if (columns.label == "RESIDENCE Address Line Text") {
                      var value =
                        xml.getElementsByTagName(`AddressLineText`)[1]
                          .childNodes[0].nodeValue;

                      return (
                        <td
                          style={{
                            textAlign: "center",
                            minWidth: "150px",
                            border: "1px solid rgba(255,255,255,0.3)",
                            minHeight: "20px",
                            borderRight: "none",
                            borderTop: "none",
                          }}
                        >
                          {`${value}`}
                        </td>
                      );
                    } else {
                      return (
                        <td
                          style={{
                            textAlign: "center",
                            minWidth: "150px",
                            border: "1px solid rgba(255,255,255,0.3)",
                            minHeight: "20px",
                            borderRight: "none",
                            borderTop: "none",
                          }}
                        >
                          {xml.getElementsByTagName(`${columns.id}`)[0]
                            ? xml.getElementsByTagName(`${columns.id}`)[0]
                                .childNodes[0].nodeValue
                            : `No data in this field ${columns.id}}`}
                        </td>
                      );
                    }
                  })}
              </tr>
            ) : (
              ""
            )}
          </table>
        )}
      </div>
      <table></table>
    </div>
  );
};

export default TableXml;

内容的提问来源于stack exchange，提问作者ashrth