选项卡未加载窗格信息

Question

我在语义ui-react中遇到了Tabs的问题，我正在尝试使用这里显示的垂直选项卡

https://react.semantic-ui.com/modules/tab#tab-example-vertical-true

示例中使用的代码是：

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]

const TabExampleVerticalTrue = () => (
  <Tab menu={{ fluid: true, vertical: true, tabular: 'right' }} panes={panes} />
)

export default TabExampleVerticalTrue

使用上面显示的代码可以正常工作，即当我单击选项卡时，它会在选项卡窗格中加载选项卡的信息。

在我的渲染功能中我有

<Tab menu={{ fluid: true, vertical: true, tabular: 'right' }} panes={panes} />

当我尝试替换下面提供的代码窗格时，单击时不会更改选项卡，它会显示单击新选项卡但不加载新选项卡窗格。

const panes = [];
for(var i = 0 ; i < 2 ; i++) {
  panes.push({ menuItem: (i+1).toString(), key:{i}, render: () =>(<Tab.Pane>{i}</Tab.Pane>) })
};

谢谢

编辑：我认为它正在更改选项卡但是在渲染时我认为选项卡窗格中的i值是在for循环结束时渲染值而不是将值设置为每次迭代的for循环内部的值

Answer 1

问题是你有一个创建闭包的循环（render函数），它引用了var声明的循环变量i。在循环之后，所有渲染函数都引用相同的i，现在它将具有值2。您可以通过将var更改为let来修复它，这会导致每个循环迭代中的i具有自己的范围。或者，您可以使用map而不是循环：

const panes = new Array(2).fill().map((__, i) => (
  { menuItem: ''+(i+1), key:{i}, render: () => <Tab.Pane>{i+1}</Tab.Pane> }
));