React中useState处理数组类型分类字段提交失败的解决方案

categories字段存储失败是两个代码错误共同导致的：

• Mongoose模型定义存在语法错误，desc字段后多写了一个闭合花括号，后续字段定义位置异常
• 前端分类输入框直接将输入的字符串值赋值给数组类型的categories状态，提交时字段类型不符合预期

1. 修正Post模型定义 #

删掉多余的闭合括号，同时明确数组元素类型，避免存入非法值：

const mongoose = require('mongoose');
const PostSchema = new mongoose.Schema(
    {
        title: {
            type: String,
            required: true,
            unique: true,
        },
        desc: {
            type: String,
            required: true,
        },
        username: {
            type: String,
        },
        categories:{
            type: [String], // 限定为字符串数组，比裸Array类型更严谨
            default: []
        }
    }
);

module.exports = mongoose.model("Post", PostSchema);

2. 修正前端分类字段处理逻辑 #

原生文本输入框拿到的e.target.value永远是字符串类型，不能直接赋值给数组状态。如果用单输入框支持多分类输入，可以约定用逗号分隔不同分类，提交时拆分转成数组：

export default function Write() {
    // 单独存输入框的字符串值
    const [catsInput, setCatsInput] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
        // 拆分输入内容，去掉首尾空格、过滤空值，得到标准分类数组
        const categories = catsInput.split(",").map(item => item.trim()).filter(Boolean);

        const newPost = {
            username: user.username,
            title,
            desc,
            categories,
        };

        if (file) {
            try {
                await axios.post("/upload", data);
            } catch (err) {}
        }
        try {
            const res = await axios.post("/posts", newPost);
            window.location.replace("/post/" + res.data._id);
        } catch (err) {}
    };

    return(
    <form className="writeForm" onSubmit={handleSubmit}>
            <input 
            type="text" 
            placeholder="多个分类用逗号分隔，例：技术,前端,React" 
            className="writeInput writeCats" 
            value={catsInput}
            onChange={(e) => setCatsInput(e.target.value)}
            />
    </form>
    )
}

如果用多选框、标签选择器等组件做分类输入，只需要保证选中值最终组装为字符串数组，再传入newPost即可，不需要做字符串拆分。

3. 接口增加类型校验（可选） #

在创建帖子的接口中增加categories字段的类型判断，避免非法格式数据写入：

//CREATE POST
router.post("/", async (req, res) => {
    // 非数组格式的分类字段默认重置为空数组
    if (!Array.isArray(req.body.categories)) {
        req.body.categories = [];
    }
    const newPost = new Post(req.body);
    try {
        const savedPost = await newPost.save();
        res.status(200).json(savedPost);
    } catch (err) {
        res.status(500).json(err);
    }
});

内容的提问来源于stack exchange，提问作者sultan.h