反应钩子，而不是重新渲染

Question

我是React和Hook的新手，我想不出为什么我单击转换后无法刷新应用程序中的文件列表。如果我刷新页面，它将仅显示正确的文件。

这是React的一部分。我以csv格式上传文件，然后将其上传后，单击转换按钮，它将提取所需的信息，然后将其写入Excel文件。

import React, { useState, useEffect } from "react";
import UploadService from "../services/FileUploadService";

const UploadFiles = () => {
  const [selectedFiles, setSelectedFiles] = useState(undefined);
  const [currentFile, setCurrentFile] = useState(undefined);
  const [progress, setProgress] = useState(0);
  const [message, setMessage] = useState("");
  const [fileInfos, setFileInfos] = useState([]);

  useEffect(() => {
    UploadService.getFiles().then((response) => {
      setFileInfos(response.data);
    });
    UploadService.getFinalFiles().then((response) => {
      setFileInfos(response.data);
    });
  }, []);

  const selectFile = (event) => {
    setSelectedFiles(event.target.files);
  };

  const upload = () => {
    let currentFile = selectedFiles[0];

    setProgress(0);
    setCurrentFile(currentFile);

    UploadService.upload(currentFile, (event) => {
      setProgress(Math.round((100 * event.loaded) / event.total));
    })
      .then((response) => {
        setMessage(response.data.message);
        return UploadService.getFiles();
      })
      .then((files) => {
        setFileInfos(files.data);
      })
      .catch(() => {
        setProgress(0);
        setMessage("Could not upload the file!");
        setCurrentFile(undefined);
      });

    setSelectedFiles(undefined);
  };

  const convert = () => {
    // let currentFile = selectedFiles[0];

    UploadService.convert(currentFile, (event) => {
      // setProgress(Math.round((100 * event.loaded) / event.total));
      console.log(event);
    })
      .then((response) => {
        setProgress(0);
        setMessage(response.data.message);
        return UploadService.getFinalFiles();
      })
      .then((files) => {
        console.log(files);
        setFileInfos(files.data);
      })
      .catch(() => {
        setProgress(0);
        setMessage("Could not convert the file!");
        setCurrentFile(undefined);
      });

    setSelectedFiles(undefined);
  };

  return (
    <div>
      {currentFile && (
        <div className="progress">
          <div
            className="progress-bar progress-bar-info progress-bar-striped"
            role="progressbar"
            aria-valuenow={progress}
            aria-valuemin="0"
            aria-valuemax="100"
            style={{ width: progress + "%" }}
          >
            {progress}%
          </div>
        </div>
      )}

      <label className="btn btn-default">
        <input type="file" onChange={selectFile} />
      </label>

      <button
        className="btn btn-success"
        disabled={!selectedFiles}
        onClick={upload}
      >
        Upload
      </button>

      <button
        className="btn btn-info"
        disabled={!message}
        onClick={convert}
        style={{ marginLeft: "5px" }}
      >
        convert
      </button>

      <div className="alert alert-light" role="alert">
        {message}
      </div>

      <div className="card">
        <div className="card-header">List of Files</div>
        <ul className="list-group list-group-flush">
          {fileInfos &&
            fileInfos.map((file, index) => (
              <li className="list-group-item" key={index}>
                <a href={file.url}>{file.name}</a>
              </li>
            ))}
        </ul>
      </div>
    </div>
  );
};

export default UploadFiles;

这里是文件控制器，转换部分将获取csv文件，提取信息并将其写入excel文件。之后，它将删除csv文件，我希望列表在单击转换按钮后显示正确的最终结果文件，而无需刷新页面。

const uploadFile = require("../middleware/upload");
const fs = require("fs");
const baseUrl = "http://localhost:8080/files/";
// Modules imports
const ExcelJS = require("exceljs");
const path =
  "C:\\vsprojects\\csv-upload\\oppo-csat\\api\\resources\\static\\assets\\uploads";
const csv = require("@fast-csv/parse");
const moment = require("moment");

const upload = async (req, res) => {
  try {
    await uploadFile(req, res);

    if (req.file == undefined) {
      return res.status(400).send({ message: "Please upload a file!" });
    }

    res.status(200).send({
      message: "Uploaded the file successfully: " + req.file.originalname,
    });
  } catch (err) {
    console.log(err);

    if (err.code == "LIMIT_FILE_SIZE") {
      return res.status(500).send({
        message: "File size cannot be larger than 2MB!",
      });
    }

    res.status(500).send({
      message: `Could not upload the file: ${req.file.originalname}. ${err}`,
    });
  }
};

const convert = async (req, res) => {
  const directoryPath = __basedir + "/resources/static/assets/uploads/";
  const finalPath = __basedir + "/resources/static/assets/downloads/";

  try {
    const date = moment("25/10/2020", "DD/MM/YYYY");
    const cases = [];

    await fs.readdirSync(directoryPath).forEach((file) => {
      fs.createReadStream(`${directoryPath}/${file}`)
        .pipe(csv.parse({ headers: true, delimiter: ";" }))
        .on("error", (error) => console.error(error))
        .on("data", async (row) => {
          let fcr = "";
          if (
            row["Satisfaction Demande"] === "Da" ||
            row["Satisfaction Demande"] === "Ja" ||
            row["Satisfaction Demande"] === "Tak" ||
            row["Satisfaction Demande"] === "Oui" ||
            row["Satisfaction Demande"] === "Yes"
          ) {
            fcr = "Yes";
          }
          if (
            row["Satisfaction Demande"] === "Nu" ||
            row["Satisfaction Demande"] === "No" ||
            row["Satisfaction Demande"] === "Non" ||
            row["Satisfaction Demande"] === "Nie" ||
            row["Satisfaction Demande"] === "Nee" ||
            row["Satisfaction Demande"] === "Nein"
          ) {
            fcr = "No";
          }
          if (
            row["[CASE_ORIGINE]"] === "Email entrant" &&
            row["[REGION2]"] !== "FR" &&
            row["[REGION2]"] !== "" &&
            row["Satisfaction note"] !== "" &&
            row.date_reponse !== "" &&
            row["[CALLERNO_EMAIL_SOCIAL]"] !== "" &&
            row["[CALLERNO_EMAIL_SOCIAL]"].includes("-") &&
            row["Satisfaction note"] !== "5" &&
            moment(row.date_reponse.slice(0, 10), "DD/MM/YYYY") > date
          ) {
            await cases.push({
              "Case ID": row["[CALLERNO_EMAIL_SOCIAL]"],
              "Email address": row["[EMAIL]"],
              Agent: row["[AGENT]"],
              Region: row["[REGION2]"],
              "CSAT note": row["Satisfaction note"],
              FCR: fcr,
            });

            let rowNum = 2;
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet("csat");
            // const file = await workbook.xlsx.readFile("test.xlsx");
            // const worksheet = await file.getWorksheet(1);
            cases.forEach((item) => {
              worksheet.getRow(rowNum).getCell(1).value = item["Case ID"];
              worksheet.getRow(rowNum).getCell(2).value = item["Email address"];
              worksheet.getRow(rowNum).getCell(3).value = item.Agent;
              worksheet.getRow(rowNum).getCell(4).value = item.Region;
              worksheet.getRow(rowNum).getCell(5).value = parseInt(
                item["CSAT note"],
                10
              );
              worksheet.getRow(rowNum).getCell(6).value = item.FCR;
              worksheet.getRow(rowNum).commit();
              rowNum += 1;
            });
            await workbook.xlsx.writeFile(`${finalPath}/results.xlsx`);
          }
        })
        .on("end", (rowCount) => {
          fs.unlinkSync(`${directoryPath}/${file}`);
          console.log(`Parsed ${rowCount} rows`);
        });
    });
    res.status(200).send("done");
  } catch (err) {
    console.log(err);

    res.status(500).send({
      message: `Could not convert the file: ${err}`,
    });
  }
};

const getListFiles = (req, res) => {
  const directoryPath = __basedir + "/resources/static/assets/uploads/";

  fs.readdir(directoryPath, function (err, files) {
    if (err) {
      res.status(500).send({
        message: "Unable to scan files!",
      });
    }

    let fileInfos = [];

    files.forEach((file) => {
      fileInfos.push({
        name: file,
        url: baseUrl + file,
      });
    });

    res.status(200).send(fileInfos);
  });
};
const getFinalFiles = (req, res) => {
  const directoryPath = __basedir + "/resources/static/assets/downloads/";

  fs.readdir(directoryPath, function (err, files) {
    if (err) {
      res.status(500).send({
        message: "Unable to scan files!",
      });
    }

    let fileInfos = [];

    files.forEach((file) => {
      fileInfos.push({
        name: file,
        url: baseUrl + file,
      });
    });

    res.status(200).send(fileInfos);
  });
};

const download = (req, res) => {
  const fileName = req.params.name;
  const directoryPath = __basedir + "/resources/static/assets/uploads/";

  res.download(directoryPath + fileName, fileName, (err) => {
    if (err) {
      res.status(500).send({
        message: "Could not download the file. " + err,
      });
    }
  });
};

module.exports = {
  upload,
  convert,
  getListFiles,
  getFinalFiles,
  download,
};