Я создал маршрут, который использует 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");
}
});
});