CODEWITHSUNDEEP
javascriptreactjs
shonminh
shonminh

Reputation: 318

React component run error.Uncaught Error: Minified React error #31

I am trying to return some html label when write render in my component. Code like this: 

 import React, {Component} from 'react';
import Request from 'react-http-request';


class NameForm extends React.Component {
constructor() {
    super();
    this.state = {value: '', result: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
    this.setState({value: event.target.value});
}

handleSubmit(event) {
    var content = this.state.value;

    var split = content.split(/\s+/);

    var queryObject = new Object();

    queryObject.law = null;
    queryObject.character = null;
    queryObject.lawRule = null;
    if (split.length == 1) {
        queryObject.law = split[0];
    }
    else if (split.length == 2) {
        queryObject.law = split[0];
        queryObject.character = split[1];
    }
    else if (split.length > 2) {
        queryObject.law = split[0];
        queryObject.character = split[1];
        queryObject.lawRule = split[2];
    }
    // var json = JSON.stringify(queryObject);
    var json = "{\"law\":\"军工企业股份制改造实施暂行办法\",\"character\":\"第二章\"}";

    var test = JSON.stringify(<Fetchs args={json}/>);


    var request = new XMLHttpRequest();
    request.open('POST', 'http://localhost:8080/path', false);
    request.setRequestHeader('Content-Type', 'application/json');
    var resp = '';
    request.onreadystatechange = function (e) {
        if (this.status == 200) {
            resp = this.response;
        }
    }

    request.send(json);

    // console.info("XMLHttpRequest test is " + JSON.stringify(resp));

    // console.info("test is " + resp);

    this.setState({result: resp});

    event.preventDefault();
}


render() {

    // console.log("prite"+this.state.result.queryResults);
    // console.log("100"+this.strToJson(this.state.result));
    // console.log("200"+this.strToJson(this.state.result.queryResults));
    // alert(this.state.result);

    var parse = JSON.parse(this.state.result ? this.state.result : null);
    var out = parse ? parse.queryResults : null;
    for (var i = 0; out != null && i < out.length; i++) {
        if (out[i].keyword == null) {
            out[i].keyword = "{}";
            console.info("keyword is null");
        }
        else {
            // this.state.result.queryResults.keyword
            console.info("keword is not null");
            out[i].keyword = JSON.stringify(out[i].keyword);
        }
    }


    return (
        <div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                </label>
                <input type="submit" value="Submit"/>
            </form>
            <table border="10" >
                <tr>
                    <thead>
                    <th>GraphName</th>
                    <th>Relation</th>
                    <th>Content</th>
                    <th>KeyWord</th>
                    </thead>
                </tr>
                <tbody>

                {out}
                </tbody>
            </table>

        </div>
    );
 }
}


ReactDOM.render(<NameForm/>, document.getElementById('react'))

out is a array parsed from json data, like this:

enter image description here

My problem is that I want show out on page by table label, But use {out} I get a error, like this: enter image description here

What troubled me is how to show out array in a table.

Upvotes: 14

Views: 71638

Answers (5)

Thaianh34
Thaianh34

Reputation: 1

In my case:

html: <span>{reason}</span>
But the reason is object type => Error: Minified React error #31;
reason: {
  code: "other",
  id: 1,
  name: "Other",
  sub_reasons: []
}

Upvotes: 0

Stael125
Stael125

Reputation: 1

When you do open with vs code on a folder then you create the react app in the terminal . It will generate a new folder on your actual folder make sure your terminal command is exceuted on the generated react app folder.

Upvotes: 0

Ben Winding
Ben Winding

Reputation: 11807

Future Readers!

In my case I had incorrectly tried to output a string during the template iteration:

// Working
return <div>{list.map((name, i) => <div key={i}> {name} </div>}</div>
// Broken
return <div>{list.map((name, i) => <div key={i}> {{name}} </div>}</div>
//                                                ^ Incorrect (causes error #31)

Upvotes: 8

Mbanda
Mbanda

Reputation: 1018

When i encountered this error, my first gaze of was that the difference themes and styling components i was using were conflicting. But latter own i discovered i was rendering wrong data format from my database. The React Form field expected to receive a string but i was supplying an Object

Upvotes: 3

Anatoly Strashkevich
Anatoly Strashkevich

Reputation: 1914

I believe your trouble maybe caused by the fact that you try to return array of objects in your react render method, instead try to map your objects and insert necessary fields in <p></p> tags. For example:

out.map(
  (object) => <p>object.content</p>
)

etc... Hope it helps!

Upvotes: 12

Related Questions