如何将useState钩子的值作为对象的动态属性名？

这完全可以实现，利用ES6的计算属性名特性就能轻松做到，以下是具体实现代码：

import { useState } from 'react';
import axios from 'axios';

const YourComponent = () => {
  // 初始化状态，比如默认使用邮箱字段
  const [useEmail, setUseEmail] = useState(true);

  // 动态生成请求体对象
  const requestBody = {
    name: someProperty, // 固定属性
    // 根据useEmail的值动态切换属性名
    [useEmail ? 'email' : 'phonenumber']: someOtherProperty
  };

  // 发起axios POST请求的示例函数
  const sendRequest = async () => {
    try {
      const response = await axios.post('/your-api-endpoint', requestBody);
      console.log('请求成功:', response.data);
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  return (
    <div>
      {/* 切换状态的按钮示例 */}
      <button onClick={() => setUseEmail(true)}>使用邮箱</button>
      <button onClick={() => setUseEmail(false)}>使用手机号</button>
      <button onClick={sendRequest}>发送请求</button>
    </div>
  );
};

export default YourComponent;

关键说明 #

• 计算属性名：用[]包裹条件表达式useEmail ? 'email' : 'phonenumber'，表达式的结果会直接作为对象的属性名，实现动态切换。
• 状态初始化：建议给useState设置明确的初始值（比如true），避免状态为undefined时出现逻辑错误。
• 实时更新：每次状态切换后，requestBody会自动重新生成，确保发起请求时使用的是最新的属性名和对应值。

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