React ReferenceError：コンストラクター "Node"を持つ "JSXSpreadChild"型の未知ノード

Question

次のコンポーネントの問題点と、エラーにつながる原因を突き止めることはできません（webpackを通じてjsファイルを作成しようとするとエラーが発生します）。

1）あなたが変異（プッシュしている：{...this.state.options}がコード

コンポーネント

import React from 'react'; 

var BoxCountComponent = React.createClass({ 

getInitialState: function() { 
    return { 
     options:[] 
    } 
}, 
componentDidMount: function() { 
    for (let i=0; i<10; i++){ 
     this.state.options.push(
      <option key={i} value={i+1}>{i+1}</option> 
     ) 
    } 
    this.forceUpdate() 
}, 
render: function() { 
    return (
     <select className="form-control" name="boxCount" id="boxCount">{...this.state.options}</select> 
    ) 
} 
}) 

エラー

ERROR in ./Dev/carwash/AddCarWashForm.jsx 
Module build failed: ReferenceError: F:/java/projects/PitStop/Front-Dev/Dev/carwash/AddCarWashForm.jsx: unknown node of type "JSXSpreadChild" with constructor "Node" 
at Generator.print (F:\java\projects\PitStop\Front-Dev\node_modules\babel-generator\lib\printer.js:356:13) 
at Generator.printJoin (F:\java\projects\PitStop\Front-Dev\node_modules\babel-generator\lib\printer.js:443:12) 
at Generator.printList (F:\java\projects\PitStop\Front-Dev\node_modules\babel-generator\lib\printer.js:507:17) 

Answer 1

次の2つの問題を抱えているに追加されたとき、この問題が登場しました）あなたの状態オブジェクト。代わりにthis.setStateを使用して、コンポーネントを自動的に再レン​​ダリングします。それは基本的にReactの背後にある考えです。状態を初期化してからsetStateに変更してください。

componentDidMount: function() { 
    let options = [] 
    for (let i=0; i<10; i++){ 
     options.push(
      <option key={i} value={i+1}>{i+1}</option> 
     ) 
    } 
    this.setState({ options }) 
}, 

2）JSXの{ }に配列を広げる必要はありません。それはあなたのためにそれを処理します。これはうまくいくはずです：

render() { 
    <select className="form-control" name="boxCount" id="boxCount"> 
    {this.state.options} 
    </select> 
}