反応コンポーネントの実行エラーです。未知の反応エラー＃31

Question

ラベルを返すと、renderが自分のコンポーネントに書き込まれます。このようなコード：

私の問題は、私は私がtableラベルでページにoutを示し、しかし{out}を使いたいということです。

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アレイテーブルで

Answer 1

私はあなたの反応レンダリングメソッドでオブジェクトの配列を返す代わりにオブジェクトをマップし、<p></p>タグに必要なフィールドを挿入しようとしているという事実が原因であると考えられます。たとえば ：

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

等... はそれが役に立てば幸い！