JavaScript解构赋值如何使用动态别名？

首先明确：你想直接用section.id + "Data"这种动态表达式作为解构别名是不行的，原因有两个：

1. 解构赋值的别名必须是合法的JavaScript标识符，不能是字符串表达式，直接写data: section.id + "Data"会触发语法错误。
2. 如果你用的useFetch是React Hook（从命名来看大概率是），那不能在forEach循环里调用它——这违反了React Hook的调用规则，Hook必须在组件顶层调用，不能在循环、条件判断或嵌套函数中执行，否则会导致Hook调用顺序混乱，引发bug。

正确的实现方式 #

你可以通过对象存储的方式来管理多个请求的结果，同时遵守Hook规则：

方式1：用数组调用Hook，再转换为键值对象 #

如果useFetch返回的是包含data和error的对象：

const sections = [
    {id: 'one', api: '/api/one'},
    {id: 'two', api: '/api/two'},
];

// 在组件顶层调用所有useFetch Hook，得到结果数组
const fetchResults = sections.map(section => 
    useFetch(() => section.api, { query: section.query })
);

// 将结果数组转换为以id拼接命名的键值对象
const requestResults = sections.reduce((acc, section, index) => {
    const { data, error } = fetchResults[index];
    acc[`${section.id}Data`] = data;
    acc[`${section.id}Error`] = error;
    return acc;
}, {});

// 后续可通过requestResults.oneData、requestResults.oneError访问对应结果

方式2：用useEffect批量发起请求（如果useFetch返回Promise） #

如果useFetch是返回Promise的普通函数而非Hook，可以在useEffect里批量处理：

import { useState, useEffect } from 'react';

const sections = [
    {id: 'one', api: '/api/one'},
    {id: 'two', api: '/api/two'},
];

const [requestResults, setRequestResults] = useState({});

useEffect(() => {
    const fetchAllSections = async () => {
        const promises = sections.map(async section => {
            const { data, error } = await useFetch(section.api, { query: section.query });
            return {
                id: section.id,
                data,
                error
            };
        });
        
        const results = await Promise.all(promises);
        const formattedResults = results.reduce((acc, item) => {
            acc[`${item.id}Data`] = item.data;
            acc[`${item.id}Error`] = item.error;
            return acc;
        }, {});
        
        setRequestResults(formattedResults);
    };

    fetchAllSections();
}, []);

核心逻辑说明 #

• 不要尝试用动态变量名直接声明const变量，而是用一个统一的对象来承载所有请求结果，通过计算属性名（${section.id}Data）来设置键名。
• 如果使用React Hook，必须保证所有Hook调用都在组件顶层，避免在循环或条件中调用，确保Hook调用顺序稳定。

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