Node.js, multer, React: компонент перезагружается при загрузке файла - PullRequest
0 голосов
/ 26 мая 2020

Я создал маршрут, который использует multer для загрузки изображения, но когда изображение загружается, родительский компонент выполняет повторный рендеринг. Я использовал тот же процесс в другом компоненте, и он работал нормально (изображение загружается, но не перерисовывается), но в этом компоненте этого не происходит:

В родительском компоненте:

<SectionCreation
toggle={setSectionCreation}
setAlert={setAlert}
shop={shop}
setImg={setImgToShow}
showImg={setShowLightBox}
/>

Дочерний компонент (куда загружается img):

const [pic, setPic] = useState(null);
    <UploadComp
    multiple={false}
    auto={true}
    uploadOnly={true}
    setImg={setPic}
    setAlert={setAlert}
    />

Компонент загрузчика:

    const [file, setFile] = useState(null);

    const onFormSubmit = async (e) => {
    const formData = new FormData();
    formData.append("myImage", file);
    if (uploadOnly === true) {
    const res = await uploadImgOnly(formData);
    if (res.status === 200) {
    setImg(res.data);
    }

<FileUpload
 auto={auto}
 name="myImage"
 onSelect={onChange}
 onProgress={onFormSubmit}
 multiple={multiple && multiple}
 accept="image/*"
 maxFileSize={1000000}
 />

Маршрут узла:

const path = require("path");
const multer = require("multer");       
const storage = multer.diskStorage({
destination: "./public/uploads/",
 filename: function (req, file, cb) {
 cb(null, "IMAGE-" + Date.now() + path.extname(file.originalname));
  },
});

        const upload = multer({
          storage: storage,
          limits: { fileSize: 10000000 },
        }).single("myImage");
        // @route   POST api/users/upload
    // @desc    Upload IMG only, return path
    // @access  Private
    router.post("/upload-only", auth, (req, res) => {
      upload(req, res, (err) => {
        if (!err) {
          res.json(req.file.filename);
        } else {
          console.error(err.message);
          res.status(500).send("Server Error");
        }
      });
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...