React调用Slack Webhook报错：Cannot convert undefined or null to object

你的报错并不是JSON.stringify(data)导致的，根源在transformRequest里的delete headers.post["Content-Type"]这行代码——当headers.post为undefined或null时，执行delete操作会抛出"Cannot convert undefined or null to object"的错误。

解决方案1：修复headers的安全访问 #

在删除Content-Type前先判断headers.post是否存在，避免对空值执行操作：

let res = await axios.post(webhookUrl, JSON.stringify(data), {
    withCredentials: false,
    transformRequest: [(data, headers) => {
        // 先检查headers.post是否存在，再执行删除
        if (headers.post) {
            delete headers.post["Content-Type"];
        }
        return data;
    }]
})

解决方案2：更简洁的正确写法（推荐） #

Slack的Incoming Webhook原生支持application/json格式请求，你完全不需要手动JSON.stringify(data)和自定义transformRequest——axios会自动帮你序列化对象并设置正确的请求头：

async function submitForm(e) {
    e.preventDefault();

    const webhookUrl = 'https://hooks.slack.com/services/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';

    const data = {
        "text": message, // 无需模板字符串，直接使用状态值即可
    }

    try {
        let res = await axios.post(webhookUrl, data, {
            withCredentials: false,
        })

        if (res.status === 200) {
            alert("Message Sent!")
            setMessage('');
        } else {
            alert("There was an error.  Please try again later.")
        }
    } catch (err) {
        // 捕获请求异常，比如网络错误、Slack返回非200状态码
        alert("Request failed: " + err.message)
    }
}

补充说明 #

• 你的message状态绑定逻辑是正确的，初始值为空字符串，所以data.text永远不会出现null或undefined的情况；
• 给axios请求添加try/catch可以避免未处理的Promise异常，让错误处理更完善。

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