ReactJs TypeError default.a.render不是一个函数

Question

我正在尝试使用Auth0EditProfileWidget

在第65行获取错误：

this.form = React.render( <FormControl data={data} onSubmit={onSubmit} />, container );

react__WEBPACK_IMPORTED_MODULE____default.a.render不是一个函数

有人能帮我吗？

编辑:代码

​

import React            from 'react';
import formSerialize    from 'form-serialize';
import FieldTypeMapper  from './FieldTypes/FieldTypeMapper'

class FormFieldList extends React.Component {
  render() {
    var fieldNodes = this.props.data.map( data => FieldTypeMapper(data.type)(data) );
    return ( <div>{fieldNodes}</div> );
  }
}

class ErrorItem extends React.Component {
  render() {
    return ( <li>{this.props.message}</li> );
  }
}

class ErrorControl extends React.Component {
  render() {
    var errors = this.props.data.map( error => ( <ErrorItem key={error} message={error} /> ) );
    var style = {};

    if (errors.length === 0) {
      style.display = 'none';
    }

    return ( <ul className="error" style={style}>{errors}</ul> );
  }
}

class FormControl extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = props.data;
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} ref="editProfileForm">

          <ErrorControl data={this.state.errors} />

          <FormFieldList data={this.state.fields} />

          <input type="submit" value="Save" />

      </form>
    );
  }

  handleSubmit(e) {
    e.preventDefault();

    var form = this.refs.editProfileForm.getDOMNode();
    var data = formSerialize(form, {hash: true});

    this.props.onSubmit(data);
  }
}

export default class EditProfileForm {
  constructor(container, data, onSubmit) {
    this.form = React.render( <FormControl data={data} onSubmit={onSubmit} />, container );
  }
  render(data) {
    this.form.setState(data);
  }
}

​

Answer 1

您是否可以尝试将EditProfileForm类更改为：

export default class EditProfileForm {
  constructor(props) {
   super(props)
  }
  render() {
    return(<FormControl data={this.props.data} onSubmit={this.props.onSubmit} />)
  }

}

然后像这样调用ReactDom.render()：

ReactDOM.render(<EditProfileForm data={dataProp} onSubmit={onSubmitProp} />, container);

Answer 2

export default class EditProfileForm {
    constructor(container, data, onSubmit) {
    this.form = React.render( <FormControl data={data} onSubmit={onSubmit} />, container );
    }
    render(data) {
    this.form.setState(data);
    }
}

这里要注意的是，首先，EditProfileForm是一个反应性组件，或者不是因为EditProfileForm没有扩展React.Component

第二件事是，this.form.setState(data);，setState的价值是什么，为什么使用this.form.setState()，它在做什么。