React组件运行错误.Uncaught错误：缩小了React错误＃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

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

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

等等 希望它能帮助！