ReferenceError:构造函数" node“类型为"JSXSpreadChild”的未知节点

Question

我无法解决以下组件的问题，以及为什么会导致错误(当我试图通过webpack创建js文件时出现了错误)。在代码中添加{...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，它将自动重新呈现您的组件。这基本上就是反应背后的整个想法。初始化一些状态，然后用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)您不需要在{ }中扩展数组。它会帮你处理的。这应该是可以的：

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