如何将React useState中嵌套对象数组转为PostgreSQL关联表？

一、原生SQL建表方案 #

将React状态拆分为主表（存储基础字段）和子表（存储pool数组元素），通过外键建立一对多关联：

1. 启用UUID扩展（可选，匹配React的uuidv4） #

PostgreSQL默认无UUID生成函数，先执行：

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

2. 创建主表 #

假设主表名为parent_records（可根据业务改名）：

CREATE TABLE parent_records (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    number INTEGER NOT NULL DEFAULT 0,
    type VARCHAR(50) NOT NULL DEFAULT 'CODE',
    flag BOOLEAN NOT NULL DEFAULT false
);

字段与React state的id、number、type、flag一一映射。

3. 创建子表（关联pool数组） #

子表名为pool_elements，通过parent_id关联主表主键：

CREATE TABLE pool_elements (
    element_id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    parent_id UUID NOT NULL,
    value INTEGER NOT NULL DEFAULT 0,
    type VARCHAR(50) NOT NULL DEFAULT 'NEW',
    FOREIGN KEY (parent_id) REFERENCES parent_records(id) ON DELETE CASCADE
);

• element_id对应React的elementId
• ON DELETE CASCADE表示删除主表记录时，自动删除关联的子表记录

4. 插入数据示例 #

先插入主表并获取返回的主键：

INSERT INTO parent_records (number, type, flag) VALUES (0, 'CODE', false) RETURNING id;

用拿到的id插入子表：

INSERT INTO pool_elements (parent_id, value, type)
VALUES 
    ('主表返回的UUID', 0, 'NEW'),
    ('主表返回的UUID', 1, 'OLD');

二、Sequelize ORM方案 #

定义两个模型并配置关联关系：

1. 主表模型（ParentRecord.js） #

const { Model, DataTypes } = require('sequelize');
const sequelize = require('../your-sequelize-instance');

class ParentRecord extends Model {}

ParentRecord.init({
    id: {
        type: DataTypes.UUID,
        defaultValue: DataTypes.UUIDV4,
        primaryKey: true
    },
    number: {
        type: DataTypes.INTEGER,
        defaultValue: 0
    },
    type: {
        type: DataTypes.STRING,
        defaultValue: 'CODE'
    },
    flag: {
        type: DataTypes.BOOLEAN,
        defaultValue: false
    }
}, {
    sequelize,
    modelName: 'ParentRecord'
});

module.exports = ParentRecord;

2. 子表模型（PoolElement.js） #

const { Model, DataTypes } = require('sequelize');
const sequelize = require('../your-sequelize-instance');
const ParentRecord = require('./ParentRecord');

class PoolElement extends Model {}

PoolElement.init({
    elementId: {
        type: DataTypes.UUID,
        defaultValue: DataTypes.UUIDV4,
        primaryKey: true,
        field: 'element_id'
    },
    value: {
        type: DataTypes.INTEGER,
        defaultValue: 0
    },
    type: {
        type: DataTypes.STRING,
        defaultValue: 'NEW'
    }
}, {
    sequelize,
    modelName: 'PoolElement',
    underscored: true // 自动将驼峰字段转为下划线格式
});

// 配置一对多关联
ParentRecord.hasMany(PoolElement, {
    foreignKey: 'parent_id',
    onDelete: 'CASCADE'
});
PoolElement.belongsTo(ParentRecord, {
    foreignKey: 'parent_id'
});

module.exports = PoolElement;

3. 插入数据示例（事务保证原子性） #

const ParentRecord = require('./models/ParentRecord');
const PoolElement = require('./models/PoolElement');

const createRecordWithPool = async () => {
    const transaction = await sequelize.transaction();
    try {
        // 插入主表
        const parent = await ParentRecord.create({
            number: 0,
            type: 'CODE',
            flag: false
        }, { transaction });

        // 插入子表
        await PoolElement.bulkCreate([
            { value: 0, type: 'NEW', parentId: parent.id },
            { value: 1, type: 'OLD', parentId: parent.id }
        ], { transaction });

        await transaction.commit();
        return parent;
    } catch (err) {
        await transaction.rollback();
        throw err;
    }
};

三、查询关联数据 #

原生SQL（JOIN查询） #

SELECT pr.*, pe.element_id, pe.value, pe.type
FROM parent_records pr
LEFT JOIN pool_elements pe ON pr.id = pe.parent_id
WHERE pr.id = '目标UUID';

Sequelize（关联查询） #

const parentWithPool = await ParentRecord.findByPk('目标UUID', {
    include: [PoolElement]
});
// 返回结果的poolElements字段对应原state的pool数组

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