Я использую Tab
от semantic-ui-реакции. Мне нужно отобразить список дней и соответствующих событий для этого дня. Тем не менее, событие, созданное в один день, появляется и в другой день.
Как видно, я создал событие в 1-й день, но оно появляется на 2-й день, что неверно. Вот как я генерирую данные вкладки:
const panes = selectedDays.map((day, index) => {
const count = index + 1;
return {
menuItem: `Day ${count}`,
render: () => <Tab.Pane><Agenda day={day} index={count} /></Tab.Pane>
};
});
this.setState({ panes });
Код компонента
{
currentIndex === 3 &&
<Fragment>
<Tab
menu={{ pointing: true }}
panes={this.state.panes}
/>
<Button className='formnext' onClick={this.handlePrevious}>
<FontAwesome name='angle-left' style={{ color: 'white', fontSize: '2.2rem' }} className='logout' />
</Button>
<Button className='formnext' onClick={this.handleNext}>
<FontAwesome name='angle-right' style={{ color: 'white', fontSize: '2.2rem' }} className='logout' />
</Button>
</Fragment>
}
Если я добавлю атрибут key
к компоненту Tab.Pane
или Agenda
, щелкнув заголовок вкладки, просто очистится мое состояние, и у меня не останется никаких данных. Есть идеи, как решить эту проблему?