Я создаю календарь, который по сути является списком дней. Когда вы прокручиваете календарь, selectedDate
обновляется в моем состоянии через Redux, используя функцию обратного вызова, которая вызывает проп onDateDidChange
.
Затем я проверяю, действительно ли дата изменилась, сравнивая ее с тем, что в данный момент хранится в состоянии, и если она отличается, я отправляю свое действие, чтобы обновить выбранную дату (дату вверху календаря). список).
Вот соответствующий код:
class Calendar extends React.Component {
onDateDidChange = date => {
if (!isSameDay(this.props.selectedDate, date)) {
this.props.onDateDidChange(date)
}
}
render() {
return (
<VirtualList
// other props...
onItemsRendered={indexes => this.onDateDidChange(dateForIndex(indexes.startIndex))}
/>
)
}
}
Calendar.propTypes = {
onDateDidChange: PropTypes.func,
selectedDate: PropTypes.instanceOf(Date),
}
const mapStateToProps = createStructuredSelector({
selectedDate: makeSelectSelectedDate(),
})
function mapDispatchToProps(dispatch) {
return {
onDateDidChange: date => dispatch(updateSelectedDate(date)),
}
}
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
)
export default compose(withConnect)(Calendar)
Это на самом деле работает, так как selectedDate
обновляется в состоянии, когда я прокручиваю список, и он обновляется в других компонентах, которые отображают его на свои реквизиты. Проблема в том, что я получаю следующее предупреждение об обновлении состояния / реквизита во время рендеринга:
warning.js:33 Warning: Cannot update during an existing state transition (such as within <code>render
или конструктор другого компонента). Методы рендеринга должны быть чистой функцией реквизита и состояния; побочные эффекты конструктора - это анти-паттерн, но их можно перенести на componentWillMount
Я использую response-tiny-virtual-list в качестве своего списка, в частности, я использую его onItemsRendered
callback prop для получения текущего индекса ("selectedDay
") из списка. Как я могу использовать эту функцию обратного вызова, не вызывая эту ошибку?