javascript - React组件运行报错.Uncaught Error : Minified React error #31

Question

在我的组件中写入 render 时，我试图返回一些 html 标签。代码如下:

 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是json数据解析出来的数组，像这样:

我的问题是我想通过 table 标签在页面上显示 out，但是使用 {out} 我得到一个错误，像这样:

困扰我的是如何在表格中显示out数组。

Answer 1

我相信你的麻烦可能是由于你试图在你的 react 渲染方法中返回对象数组，而不是尝试映射你的对象并在 <p></p> 中插入必要的字段。标签。例如:

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

等等...希望能帮助到你!