关于React组件和this.setState（）的非常奇怪和出乎意料的问题

Question

我遇到了一个意外的问题，第二天无法解决，所以我在这里寻求帮助。另外，我应该提到我使用CoffeeScript 2。

我有一个父组件（Form）和子组件（表单元素），问题涉及组件之一（自定义多选项选择器）。他们的工作顺序如下：该表单具有已设置道具value（从t​​his.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()
这是父项（Form

）中enterChange的处理程序：

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
      }
    }
现在，这是我得到的，真正让我感到惊讶的是：状态（我用作FormItem

的value道具的this.state.current_page.active_options.value）变成不确定的数组，例如，如果我选择三个选项，则我获取[[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
  #     }
  #   }
此外，如果我不将状态value

用作FormItem的道具，那么状态将成功更改（获得对象数组）！我根本不明白是什么，所以我想请您帮我解决这个奇怪的问题.....

我遇到了一个意外的问题，第二天无法解决，所以我在这里寻求帮助。另外，我应该提到我使用CoffeeScript2。我有一个父组件（窗体）和子组件（窗体...

Answer 1

我解决了问题，这是我的错误。问题出在这部分代码（FormItem）：