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，它将自动重新渲染您的组件。这基本上是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>
}

React ReferenceError：类型为＃34; JSXSpreadChild＆＃34;的未知节点使用构造函数＆＃34; Node＆＃34;

1 个答案: