反应引用错误：带有构造函数"Node"的 "JSXSpreadChild" 类型的未知节点

Question

我无法理解以下组件中的问题是什么，以及为什么会导致错误(当我试图通过webpack制作js文件时出现错误)。在代码

中添加{...this.state.options}时出现此问题<<p> 组件/strong>

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:javaprojectsPitStopFront-Devnode_modulesbabel-generatorlibprinter.js:356:13)
at Generator.printJoin (F:javaprojectsPitStopFront-Devnode_modulesbabel-generatorlibprinter.js:443:12)
at Generator.printList (F:javaprojectsPitStopFront-Devnode_modulesbabel-generatorlibprinter.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>
}