React使用Axios发送Post请求时如何格式化Payload的data字段

我是该技术领域的初学者，若表述存在不当之处还请谅解。目前我搭建了一个简易Web UI，包含用于输入Name的文本框、用于选择类型的复选框以及提交按钮。

测试代码如下：

value = "val7";
key = "63";
typeID = 103;
name = "testname";

const onSubmitClick = (event) => {
    axiosPost('testurl',
    {
        Message: {
            Type: typeID,
            Payload: {
                title: null,
                messagebody: null,
                data: {
                    value,
                    key,
                },
            },
            Delivery: {
                Name: [{"Name": name}]
            }
        }
    })
}

点击提交按钮时，当前发送的Payload结构如下：

{
    "Message": {
        "Type": 103,
        "Payload": {
            "title": null,
            "messagebody": null,
            "data": {
                "value": "val17",
                "key": "63"
            }
        },
        "Delivery": {
            "Name": [{
                "Name": "testname"
            }]
        }
    }
}

实际需要的Payload中data部分结构如下：

{
    "Message": {
        "Type": 103,
        "Payload": {
            "title": null,
            "messagebody": null,
            "data": {
                "val17": "63"
            }
        },
        "Delivery": {
            "Name": [{
                "Name": "testname"
            }]
        }
    }
}

你当前的写法是对象属性的简写语法，{value, key}等价于{value: value, key: key}，会生成固定名为value、key的两个属性，和你需要的「变量值作为属性名」的需求不符。
直接使用ES6的计算属性名语法即可，把data字段的写法修改为：

data: {
    [value]: key
}

修改后的完整提交逻辑代码：

const onSubmitClick = (event) => {
    axiosPost('testurl',
    {
        Message: {
            Type: typeID,
            Payload: {
                title: null,
                messagebody: null,
                data: {
                    [value]: key
                },
            },
            Delivery: {
                Name: [{"Name": name}]
            }
        }
    })
}

如果需要兼容不支持ES6的极老旧运行环境，可以先初始化空对象，再通过方括号语法动态赋值属性：

const payload = {
    Message: {
        Type: typeID,
        Payload: {
            title: null,
            messagebody: null,
            data: {},
        },
        Delivery: {
            Name: [{"Name": name}]
        }
    }
}
payload.Message.Payload.data[value] = key;
axiosPost('testurl', payload)

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