Очень странная и неожиданная проблема с компонентами React и this.setState () - PullRequest
0 голосов
/ 25 октября 2019

Я встретил неожиданную проблему и не могу решить ее второй день, поэтому я обращаюсь за помощью здесь. Кроме того, я должен упомянуть, что я использую CoffeeScript 2.

У меня есть родительский компонент ( Форма ) и дочерние компоненты (элементы формы), проблема касается одного из компонентов (пользовательский нескольковыбор опций). Их порядок работы следующий: в форме есть этот компонент, у которого установлен реквизит значение (массив объектов, полученных из формы this.state, изначально этот массив пуст) и enterChange (обработчик, который изменяет состояние, т.е. выбранные параметры).

Дочерний элемент ( FormItem ), также имеет свою собственную логику, имеет два состояния - режим просмотра выбранных параметров и режим выбора. Каждый раз, когда вы нажимаете на опцию в режиме выбора, вызывается эта функция (которая заставляет родителя обновлять данные):

select: (option) =>
  if @props.config.multiple
    selected_options = @props.value
    already_exists = _.findWhere selected_options, { id: option.id }
    if already_exists
      options = _.reject selected_options, (object) -> object.id is option.id
    else
      options = [selected_options..., option]
    @props.enterChange options // here we pass an array of selected options.
  else
    @props.enterChange option
    @hideSelector()

А вот обработчик enterChange вparent ( Form ):

selectActiveOptions: (options) =>
  # ask you to pay attention to this console.log
  console.log options # prints [undefined]
  @setState
    current_page: {
      @state.current_page...
      active_options: {
        @state.current_page.active_options...
        value: options
        valid: null
      }
    }

А теперь вот что я получаю и что меня действительно удивляет: Состояние ( this.state.current_page.active_options.value , которое я использую в качестве значение реквизит для FormItem ) превращается в массив неопределенных, например, если я выбираю три варианта, то я получаю [undefined, undefined, undefined] . Но это еще не все ...

Как вы видели, console.log печатает тот же массив неопределенных, НО! Если я отключу функцию this.setState, то переменная options - это обычный массив объектов! Здесь:

selectActiveOptions: (options) =>
  # ask you to pay attention to this console.log
  console.log options # prints [{ id: 'first', title: 'First' }]
  # @setState
  #   current_page: {
  #     @state.current_page...
  #     active_options: {
  #       @state.current_page.active_options...
  #       value: options
  #       valid: null
  #     }
  #   }

Кроме того, если я не использую состояние значение в качестве реквизита FormItem , то состояние будет успешно изменено (получен массив объектов)! Я вообще не понимаю, в чем дело, поэтому я прошу вашей помощи мне в этой странной для меня проблеме .....

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