Question

我在组件中写html时尝试返回一些render标签。像这样的代码：

 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数据解析的数组，如下所示：

我的问题是我希望在out标签的页面上显示table，但是使用{out}我收到错误，如下所示：

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

Answer 1

我相信您的麻烦可能是因为您尝试在您的react render方法中返回对象数组，而是尝试映射您的对象并在<p></p>标记中插入必要的字段。例如：

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

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

Answer 2

未来的读者！

就我而言，我在模板迭代期间错误地尝试输出字符串：

// 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)

Answer 3

当我遇到此错误时，我的第一眼是我所使用的差异主题和样式组件存在冲突。但后来发现我自己的数据库是rendering错误的数据格式。 反应表格字段预期会收到一个字符串 ，但 我正在提供一个对象

React组件运行错误。未捕获错误：Minified React错误＃31

3 个答案: