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

等等 希望它能幫助！