使用 getInitialState() 时出现“仅支持使用 React.createClass 创建的类”错误

Question

Trying to update my form using reactjs, ComponentDidMount working fine, but cant pass value to <input type="text" name="text" value={this.state.Bio.title}/> . How do I resolve this issue?

ERROR 1:

Warning: getInitialState was defined on BioUpdateById, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

ERROR 2:

TypeError: Cannot read property 'Bio' of null

My code below:

import React, { Component } from 'react';
import { withRouter } from 'react-router';

//import Form from '../components/bioUpdateForm';
import { fetchBio, updateBio } from '../action/BioAction';

class BioUpdateById extends Component {

    getInitialState() {
        return {
            Bio: {}
        };
    }

    ComponentDidMount() {
        fetchBio(this.props.params.id)
            .then((data)=> {
                this.setState( state => {
                    state.Bio = data;
                    return state;
                })})
            .catch((err)=> {
                console.log('err', err)
            });
    }

    render() {
        return (
            <div>
            <input type="text" name="text" value={this.state.Bio.title}/>
            </div>
        );
    }
};

export default BioUpdateById;

UPDATE

first update added, but again error from bioUpdateForm

import React, { Component } from 'react';
import { withRouter } from 'react-router';

import Form from '../components/bioUpdateForm';
import { fetchBio, updateBio } from '../action/BioAction';



class BioUpdateById extends Component {

state = {
  Bio: {},
};

componentDidMount()
{
 fetchBio(this.props.params.id).then((data)=> { this.setState( state =>{ state.Bio = data; return state;})}).catch((err)=>{ console.log('err', err)});

}

handleSubmit(e) {
    alert('An essay was submitted: ' + this.state.value);
    e.preventDefault();
  }

// handleSubmit(data) 
// {
//     updatebio(this.state.bio.id, data);
// };

  render() {
        return (
            <div>
              <Form onSubmit={this.handleSubmit}
                  title = {this.state.Bio.title}
                  body  = {this.state.Bio.body}
                ></Form>            
            </div>
        );
    }
};

export default BioUpdateById;

Here is my Bioupdate form

import React, { Component } from 'react';




class Form extends Component {


    getInitialState() {
        return {
            title: this.props.title || '',
            body: this.props.body || ''
        }
    }


    handleTitleChange(e) {
        this.setState({
            title: e.target.value
        });
    }
    handleBodyChange(e) {
        this.setState({
            body: e.target.value
        });
    }


    handleSubmit(e) {
        e.preventDefault();
        this.props.onSubmit(this.state);
    }


    render() {
        return (
            <form name="blog_post" className="form-horizontal" onSubmit={this.handleSubmit}>
                <div id="blog_post">
                    <div className="form-group">
                        <label className="col-sm-2 control-label required" htmlFor="blog_post_title">course</label>
                        <div className="col-sm-10">
                            <input type="text"
                                   id="blog_post_title"
                                   required="required"
                                   value={this.state.Bio.title}
                                   onChange={this.handleTitleChange}
                                   className="form-control"/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label required" htmlFor="blog_post_body">Field of college</label>
                        <div className="col-sm-10">
                            <input type="text"
                                   id="blog_post_body"
                                   required="required"
                                   value={this.state.Bio.body}
                                   onChange={this.handleBodyChange}
                                   className="form-control"/>
                        </div>
                    </div>

                    <div className="form-group">
                        <div className="col-sm-2"></div>
                        <div className="col-sm-10">
                            <button type="submit"
                                    id="blog_post_submit"
                                    className="btn-default btn">
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        );
    }
};

export default Form;

ERROR 3 : TypeError: Cannot read property 'Bio' of null

Answer 1

you're missing the initialization of the state in the constructor, this is why you get the exception.

constructor(props) {
 super(props);
 this.state = {
   Bio: {}
 };
}

then when you set the state do not mutate the previous state that you receive in the callback, but return a new object

fetchBio(this.props.params.id)
 .then(data => this.setState( prevState => { return { Bio: data }}) )
 .catch(err => console.log('err', err));

And initialize the state even in the Form component in the same way you did for the BioUpdateById component

state = {
   title: this.props.title || '',
   body: this.props.body || ''
}

Answer 2

Don't use getInitialState , its nowhere in the new reactjs versions. This is happening because when your component is rendering state.Bio is undefined. Place this state in your class and remove getInitialState .

state = {
  Bio: {},
};

Answer 3

getInitialState is deprecated method, if you create component as a class you can define initial state as property or in constructor

you should change

getInitialState() {
    return {
        Bio: {}
    };
}

on

state = {
    Bio: {}
}

also not ComponentDidMount but componentDidMount