反應選擇引發錯誤

我正在使用React-selected（https://github.com/chenglou/react-chosen，jQuery Chosen插件的React包裝器，https://harvesthq.github.io/chosen/）。我遇到了多選元素的問題。反應選擇引發錯誤

如果我做這樣的事情（一個React.createClass調用內部）：

loadDataFromServer: function() { 
     $.ajax({ 
      url: '/api/users/', 
      dataType: 'json', 
      success: function(data) { 
       for (var i = 0; i < data.length; i++) { 
        var option = data[i]; 
        var val = [option.id]; 
        this.state.options.push(
         <option key={i} value={val}>{option.name}</option> 
        ); 
       } 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.error(this.props.url, status, err.toString()); 
      }.bind(this) 
     }); 
    }, 
    getInitialState: function() { 
     return {data: [], options: []}; 
    }, 
    componentDidMount: function() { 
     this.loadDataFromServer(); 
    }, 
    render: function() { 
     return (
      <form className="well base_well new_task_well" onSubmit={this.handleSubmit}> 
       <Chosen width="300px" data-placeholder="Select..." multiple> 
        {this.state.options} 
       </Chosen> 
       <button type="button" className="btn add_button" id="add_new_task_btn" type="submit">Add</button> 
      </form> 
     ) 
    }

然後一切工作正常（我基本上做一個AJAX調用的API，並建立基於可能多個值的下拉選擇列表結果）。

然而，爲了減少代碼大小，我想建立選擇列表作爲一個單獨的組件，如這裏所描述https://stackoverflow.com/a/25818571/2486678

我構建組件是這樣的：

var multipleSelect = React.createClass({ 
    propTypes: { 
     url: React.PropTypes.string.isRequired 
    }, 
    getInitialState: function() { 
     return { 
      options: [] 
     } 
    }, 
    componentDidMount: function() { 
     $.ajax({ 
      url: this.props.url, 
      success: this.successHandler 
     }) 
    }, 
    successHandler: function(data) { 
     for (var i = 0; i < data.length; i++) { 
      var option = data[i]; 
      this.state.options.push(
       <option key={i} value={option.value}>{option.name}</option> 
      ); 
     } 
    }, 
    render: function() { 
     return this.transferPropsTo(
      <Chosen width="300px" data-placeholder="Select..." multiple> 
       {this.state.options} 
      </Chosen> 
     ) 
    } 
});

，然後在父組件的render方法，我「插入」的multipleSelect組件到表單：

<multipleSelect url="/api/places" 
    value={this.state.place_childSelectValue} onChange={this.place_changeHandler} 
/>

雖然這工作罰款只有可能的一個值Chosen元素（不multiple道具通過），如果我嘗試這種方法對於具有多個可能值列表，我得到這個錯誤：

「警告：提供給<選擇value道具>必須是數組，如果multiple爲真。檢查的Chosen渲染方法。」

任何想法，爲什麼正在發生>

來源

2014-10-05 George Oblapenko

是'place_childSelectValue'陣列如果不是這樣，它需要你也不要存放在狀態的描述，你應該將數據存儲'successHandler？： FUNC （data）{this.setState（{data：data}）}'並在渲染中創建'

你使用多選，因此value道具必須是一個數組（多選擇）使用數組place_childSelectValue ，或者只是把他變成單個元素數組：

[this.state.place_childSelectValue]

來源

2014-10-05 20:16:08 yarden

是的，我忘了將'place_childSelectValue'設置爲'componentDidMount'中的空數組。 – 2014-10-06 12:44:29

反應選擇引發錯誤

回答

相關問題