Функция обратного вызова в компоненте отправляет действие в Redux, но получает предупреждение, чтобы не делать этого - PullRequest
0 голосов
/ 31 октября 2018

Я создаю календарь, который по сути является списком дней. Когда вы прокручиваете календарь, 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 ") из списка. Как я могу использовать эту функцию обратного вызова, не вызывая эту ошибку?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...