我正在尝试在我的下一个/反应应用程序中使用react-tabs实现一些选项卡。
我有一个主页project/:id
,该页面始终在0索引标签中打开,并且在选择每个标签时,会将标签名称添加到路由中,例如:project/:id/one-tab
。
这样,如果我共享链接project/:id/two-tab
,则该站点将在1索引标签中打开。
但是我遇到了错误
react-dom.development.js:20312 Uncaught Error: Switching between controlled mode (by using
selectedIndex ) and uncontrolled mode is not supported in
标签.
at Function.copyPropsToState (Tabs.js:65)
at getDerivedStateFromProps (Tabs.js:50)
我的组件看起来像这样
class Project extends React.Component {
constructor(props) {
super(props);
resetIdCounter();
}
state = {
tabIndex: null
};
static async getInitialProps({ query }) {
return { query };
}
render() {
const { query } = this.props;
const { tabIndex } = this.state;
const TAB = {
tab1: 0,
tab2: 1,
};
return (
<div>
<Tabs
selectedIndex={tabIndex || TAB[query.tab]}
onSelect={index => this.setState({ tabIndex: index })}
>
<StyledTabList>
<StyledTab
onClick={() =>
Router.replaceRoute("one-tab", { id })
}
>
One tab
</StyledTab>
<StyledTab
onClick={() => Router.replaceRoute("two-tab", { id })}
>
Two tab
</StyledTab>
</StyledTabList>
</Tabs>
</div>
);
}
}
export default Project;
答案 0 :(得分:1)
在使用该库时,我遇到了同样的错误。通过确保在selectedIndex
函数之前定义了传递给undefined
道具的值(不是null
或return
),可以解决此问题。
所以改变这个:
const TAB = {
tab1: 0,
tab2: 1,
};
return (
<div>
<Tabs
selectedIndex={tabIndex || TAB[query.tab]}
onSelect={index => this.setState({ tabIndex: index })}
>
进入此:
const TAB = {
tab1: 0,
tab2: 1,
};
const selectedIdx = tabIndex ? tabIndex : TAB[query.tab]
return (
<div>
<Tabs
selectedIndex={selectedIdx}
onSelect={index => this.setState({ tabIndex: index })}
>
编辑:
您还可以在构造函数中设置state.tabIndex = 0
,因为0索引标签是您的默认标签。