如何用动态变量解构自定义Hook返回的对象？

我在解构自定义Hook时，执行{test, jsx} = useField()只能自动解构出test和jsx。我还想同时解构出动态生成的[code]: value与[set${code}]: setValue（例如date和setDate），但无法实现。附上useField的代码如下：

export const useField = ({
    code,
    fieldType,
    label,
    type,
}: FilterFieldProps) => {
    const [value, setValue] = useState<Date | null>(null)

    const jsx = (
        <FormGroup label={label}>
            {(() => {
                switch (fieldType) {
                    case 'datePicker':
                        return (
                            <DatePicker
                                onChange={(date) => {
                                    setValue(date)
                                }}
                                selected={value}
                            />
                        )
                }
            })()}
        </FormGroup>
    )
    const test = 'test'

    return { [test]: 'test', [code]: value, [`set${code}`]: setValue, jsx }
}

请问是否可以自动解构这两个动态变量？

无法直接通过静态解构获取动态命名的键，但可以通过以下几种方式实现需求：

1. 已知code值时，用变量作为键解构
   如果调用useField时已经明确code的取值（比如传入code: 'date'），可以直接用变量绑定对应属性：

const code = 'date';
const { [code]: date, [`set${code}`]: setDate, test, jsx } = useField({ code, ...其他参数 });

2. 先获取返回对象再动态取值
   如果code是动态传入或提前不确定，先拿到完整返回对象，再根据code提取属性：

const fieldObj = useField({ code: 'date', ...其他参数 });
const date = fieldObj[code];
const setDate = fieldObj[`set${code}`];
const { test, jsx } = fieldObj;

3. 调整Hook返回结构（推荐）
   把动态属性打包成固定结构，避免动态键带来的解构问题，同时提升代码可读性：

// 修改useField返回值
return {
  test: 'test',
  jsx,
  // 统一打包动态相关属性
  fieldData: {
    value,
    setValue,
    code
  }
};

// 使用时解构
const { test, jsx, fieldData: { value: date, setValue: setDate } } = useField({ code: 'date', ...其他参数 });

或者直接返回value和setValue作为固定属性，让调用方自行命名：

// 修改useField返回
return { test: 'test', jsx, value, setValue };

// 使用时自定义别名
const { test, jsx, value: date, setValue: setDate } = useField(...);

内容的提问来源于stack exchange，提问作者Алексей Ганин