React如何向子组件传递索引参数并解决handleChange不是函数的报错

• 变量遮蔽与错误解构
  你在map回调中执行const {label, handleChange} = tabPanelItem;时，tabsPanelData数组内的所有元素都只包含label属性，不存在handleChange属性，因此解构得到的handleChange为undefined，同时覆盖了父组件外层定义的同名handleChange函数。
• 传递props时错误执行了函数
  即便没有上述解构问题，你写的handleChange={handleChange(i)}属于在渲染阶段直接调用handleChange函数，最终传递给子组件的是函数的返回值（当前handleChange没有返回值，结果为undefined），而非可调用的函数本身。

修改父组件map循环内的逻辑，删除错误的handleChange解构，同时用箭头函数包裹需要传递的点击回调，绑定对应的索引：

const TabPanel = () => {
    const tabsPanelData = [
        {label: 'tab1'},
        {label: 'tab2'},
        {label: 'tab3'}
    ];
    const [tabIndex, settabIndex] = useState(0);

    const handleChange = (index) => {
        console.log(index);
    }

    return (
        <StyledTabPanel>
            {tabsPanelData.map((tabPanelItem, i) => {
                const {label} = tabPanelItem; // 仅解构存在的label属性
                return (
                    <TabPanelItem
                        key={i}
                        label={label}
                        handleChange={() => handleChange(i)} // 用箭头函数包裹，点击时才会执行
                    />
                )
            })}
        </StyledTabPanel>
    )
}

内容的提问来源于stack exchange，提问作者Влад Лисовский