时间戳

首页 > 解决方案 > ReactJs TypeError default.a.render 不是函数

reactjs - ReactJs TypeError default.a.render 不是函数

问题描述

我正在尝试使用Auth0EditProfileWidget

在第 65 行出现错误：

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

类型错误：react__WEBPACK_IMPORTED_MODULE_0___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);
  }
}

标签： reactjs

解决方案

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);的价值是什么。setStatethis.form.setState()

推荐阅读