React JS 发送POST请求时body动态键取变量名而非实际值问题求解

在JavaScript对象字面量语法中，直接编写{ field: content }时，键名field会被识别为固定字符串，不会解析为你传入的field变量的实际值，这就是硬编码email可正常运行、使用field变量失效的核心原因。

使用ES6引入的计算属性名语法即可实现动态键名，只需将键名用方括号[]包裹即可，修改后代码如下：

body: JSON.stringify({ [field]: content })

将你原代码中注释的无效行替换为上述写法，就可以自动读取field参数的实际值作为请求体键名，适配不同接口的传参要求。

• 你的当前自定义Hook没有返回请求结果data，调用侧无法拿到返回值，建议在函数末尾添加return data
• 可新增加载状态、错误状态的返回，方便调用侧处理加载中、请求失败的交互场景，优化后完整代码参考：

Request.useSendPostWithBody = (endpoint, field, content) => {
    const [data, setData] = useState('')
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(null)

    useEffect(() => {
        setLoading(true)
        fetch(`${window.ipAddress.ip}/${endpoint}`, {
            method: "POST",  
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify({ [field]: content })
        })
        .then((result)=> result.json())
        .then((res)=>{ 
            setData(res)
            setError(null)
        })
        .catch(err =>{ 
            console.error("请求错误：", err)
            setError(err)
        })
        .finally(() => {
            setLoading(false)
        })
    // 补全useEffect依赖项，避免闭包导致的参数更新不生效问题
    }, [endpoint, field, content])

    return { data, loading, error }
}

• 调用侧可直接解构获取状态使用：

const { data, loading, error } = Request.useSendPostWithBody("User/checkAlt","email","XXX@XXX.uk")

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