为什么我的代码有时只在 ReactJS NodeJS PostgreSQL 有效？答案

【问题标题】：Why my code works only sometimes ReactJS NodeJS PostegreSQL?为什么我的代码有时只在 ReactJS NodeJS PostgreSQL 有效？
【发布时间】：2022-01-24 22:00:17
【问题描述】：

我有 PRN 网络应用程序，它具有在 PostegreSQL 中创建一些实体的功能（表单包括 2 个输入 type="file"，一个用于视频，1 个用于多张照片。1 个视频和 1 个照片将重命名并保存在文件夹“静态”，所有其他照片也将重命名并保存在文件夹中，但将仅与照片一起保存在另一个实体中）。它可以工作，但可以工作 10 次中的 1 次。发生的原因是什么？

表单数据：

  const addCar = () => {
        const formData = new FormData()
        formData.append('price', Number(price).toLocaleString('ru'))
        formData.append('carNameId', Number(car.selectedCarName.id))
        formData.append('year', `${year}`)
        formData.append('motor', motor)
        let date = new Date().toLocaleDateString()
        formData.append('date', date)
        formData.append('video', video)
        formData.append('image', images[0])
        Array.from(images).forEach(image => {
            formData.append('images', image);
        });
        createCar(formData).then(() => setCarVisible(false))
}

API：

export const createCar = async (car) => {
    const {data} = await $authHost.post('api/car', car)
    return data
}

控制器 NodeJS：

class CarController {
    async create(req,res,next){                                
        try{
            let {price, carNameId, year, motor, date} = req.body        
            const {video, image, images} = req.files;                                                                 
            let videoName = uuid.v4() + '.mp4';                                                           
            video.mv(path.resolve(__dirname,'..', 'static', videoName));                                      
            let imgName  = uuid.v4() + '.jpg';
            image.mv(path.resolve(__dirname,'..', 'static', imgName))
            const car = await Car.create( {price,carNameId,year,motor,date,video: videoName,image: imgName})       
                for (let i = 0; i<images.length;i++) {
                    imgName = uuid.v4() + '.jpg'
                    images[i].mv(path.resolve(__dirname,'..', 'static', imgName))
                    CarImages.create({
                        img: imgName,
                        carId: car.id
                    })
            }
            return res.json(car)                        
        } catch (e){
            next(ApiError.badRequest(e.message))     
        }
    }
}

实体：

const Car = sequelize.define('car', {
    id:                  {type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true},      
    price:               {type: DataTypes.STRING,    allowNull: false },        
    carNameId:           {type: DataTypes.INTEGER,   allowNull: false },         
    year:                {type: DataTypes.INTEGER,   allowNull: false},        
    motor:               {type: DataTypes.STRING,    allowNull: false },         
    date:                {type: DataTypes.STRING,    allowNull: false },          
    video:               {type: DataTypes.STRING,    allowNull: false },           
    image:               {type: DataTypes.STRING,    allowNull: false }            
})

const CarImages = sequelize.define('car_images', {
    id:                  {type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true},
    img:                 {type: DataTypes.STRING,    allowNull: false}
})

Car.hasMany(CarImages, {as: 'images'})
CarImages.belongsTo(Car)

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

这是因为 JSX 中的按钮标签事件而发生的。它强制重新渲染您的组件，而无需等待您的 xhr 完成。这就是有时工作过程的原因。如果 xhr 比重新渲染组件快，则操作将成功。像这样使用您的操作：

只需在您的点击处理程序中获取事件并删除默认事件。

或使用div代替按钮标签

const addCar = (**event**) => {
        **event.preventDefault();**
        const formData = new FormData()
        formData.append('price', Number(price).toLocaleString('ru'))
        formData.append('carNameId', Number(car.selectedCarName.id))
        formData.append('year', `${year}`)
        formData.append('motor', motor)
        let date = new Date().toLocaleDateString()
        formData.append('date', date)
        formData.append('video', video)
        formData.append('image', images[0])
        Array.from(images).forEach(image => {
            formData.append('images', image);
        });
        createCar(formData).then(() => setCarVisible(false))
}

【讨论】：