陣營的ReferenceError：未知節點類型的「JSXSpreadChild」與構造「節點」

Question

我不能已瞭解了在以下componens問題，以及爲什麼它會導致錯誤（出現了錯誤，當我試圖讓JS通過的WebPack文件）。這個問題出現時{...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

你有兩個問題：

1）你推（變異）你的狀態對象。而是使用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> 
}