如何在React+Django项目中修改JSONField存储的对象键名

问题根因 #

你当前的键名修改逻辑只做了旧键删除操作，没有将新键名和原键对应的value关联存入JSON对象，不需要调整后端实现，Django的JSONField支持任意合法的JSON键名，仅修改前端逻辑即可解决问题。

修复后的处理函数代码 #

handleDataChangeFunction(event, keyOrValue, keyName) {
    console.log("HANDLE JSON CHANGE")
    const inputValue = event.target.value;
    const data = {...this.state.data};

    if(keyOrValue === "value"){
        data[keyName] = inputValue;
        this.setState({ data })
    }

    if(keyOrValue === "key") {
        // 新旧键名一致时跳过操作
        if(inputValue === keyName) return
        // 可选：增加重名判断，避免覆盖已有键
        if(data.hasOwnProperty(inputValue)) {
            alert("该键名已存在，请输入其他名称")
            return
        }
        // 存储旧键对应的值
        const originValue = data[keyName]
        // 删除旧键
        delete data[keyName]
        // 写入新键值对
        data[inputValue] = originValue
        this.setState({ data })
    }
}

可选优化建议 #

你当前渲染键值对列表时使用数组下标作为key属性，修改键名、新增/删除条目时可能出现渲染错位，建议将渲染逻辑中的key={keyIndex}改为key={keyName}，保证React能正确追踪每个条目的唯一性。

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