React.js組件運行error.Uncaught TypeError：無法讀取未定義的屬性'0'

我試圖創建一個Fetch組件，它應發送POST請求返回響應內容。同時我創建了一個NameForm組件，它生成一個數據給Fetch組件發送請求。我的問題是，當我使用this.state.result.queryResults[0]，我在這樣的鍍鉻得到了一個錯誤：React.js組件運行error.Uncaught TypeError：無法讀取未定義的屬性'0'

這裏是我的js代碼：

 import React, {Component} from 'react'; 
     import Request from 'react-http-request'; 

     class Fetch extends React.Component { 

      constructor() { 
       super(); 
      } 

      render() { 
       return (
        <Request 
         url='http://localhost:8080/path' 
         method='post' 
         accept='application/json' 
         type="application/json" 
         send={this.props.args} 
         verbose={true} 
        > 
         { 
          ({error, result, loading}) => { 
           if (loading) { 
            return <div>loading...</div>; 
           } else { 
            return <div>{result.text}</div>; 
           } 
          } 
         } 
        </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); 



       this.setState({result: (<Fetch args={json}/>)}); 

       event.preventDefault(); 
      } 

      render() { 
       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> 
          <thead> 
          <tr> 
           <th>GraphName</th> 
           <th>Relation</th> 
           <th>Content</th> 
           <th>KeyWord</th> 
          </tr> 
          </thead> 
          <tboy>{this.state.result.queryResults[0]}</tboy> 
         </table> 

        </div> 
       ); 
      } 
     } 

     ReactDOM.render(<NameForm/>, document.getElementById('react'))

而且我的帖子的反應是這樣的JSON：

{ 
     "path": { 
      "law": "MyLaw", 
      "character": "C1", 
      "lawRule": null 
     }, 
     "queryResults": [ 
      { 
       "graphName": "MyLaw/C1", 
       "relation": "self", 
       "content": "I am C1", 
       "keyword": { 
        "a": 0.4296310331415849, 
        "b": 0.22019926949447058, 
        "c": 0.16514945212085294, 
        "d": 0.16514945212085294, 
       } 
      }, 
      { 
       "graphName": "MyLaw/C1/C1.1", 
       "relation": "child", 
       "content": "I am C1.1", 
       "keyword": null 
      }, 

      { 
       "graphName": "MyLaw/C1/C1.2", 
       "relation": "child", 
       "content": "I am C1.2", 
       "keyword": null 
      }, 
      { 
       "graphName": "MyLaw/C1/C1.3", 
       "relation": "child", 
       "content": "I am C1.3", 
       "keyword": null 
      }, 

     ] 
    }

來源

2017-08-24 Shonminh Yang

什麼的了，當你做'的console.log（this.state.result）把' – abdul

可能的獲取由或狀態更新之前的組件安裝。所以如果狀態沒有設置，錯誤是可以預料的。我建議你做一個檢查以確保結果存在。這樣的東西 'this.state.result？this.state.result.queryResults [0]：「」' – abdul

輸出是一個對象，但不包含'queryResults'，我用'this.state.result？ this.state.result.queryResults [0]：「」'和頁面正在記錄。但是當我使用' {this.state.result}'時，頁面顯示json數據。 –

在構造，我們定義了state初始值

 constructor() { 
      super(); 
      this.state = {value: '', result: []}; 

      this.handleChange = this.handleChange.bind(this); 
      this.handleSubmit = this.handleSubmit.bind(this); 
     }

因此，result的初始值是[]。

而在handleSubmit中，您將獲取結果的數據。

 handleSubmit(event) { 
      ... 
      this.setState({result: (<Fetch args={json}/>)}); 
      ... 
     }

因此，提交和數據被獲取前，result是[]

所以，請更改

<tboy>{this.state.result.queryResults[0]}</tboy>

要

<tboy>{this.state.resultthis.state.result.queryResults[0]}</tboy>

來源

2017-08-24 07:29:22

' {this.state.resultthis.state.result.queryResults [0]}'是什麼意思？ –

嗨，這是從你的代碼複製和粘貼：0 –

在您最初的渲染結果狀態一個空的數組，並且它一直保持，直到來自fetch調用的響應被重置可察覺。所以

<tbody>{this.state.result.queryResults[0]}</tbody>

失敗，因爲result.queryResults未定義。

所以你需要一個條件檢查。

<tbody>{this.state.result.length > 0? 
    this.state.result.queryResults && 
    this.state.result.queryResults[0]: 
null}</tbody>

來源

2017-08-24 07:33:52

做你喜歡你的建議，我調試我的js代碼，當提交動作時，'this.state.result'不存在'queryResults'。該頁面不顯示數據。 –

檢查更新 –

它給你的錯誤，因爲它第一次呈現時，它不能找到queryResult，直到請求命中服務器。

試試這個：

<tboy> 
    { 
     this.state.result.queryResults 
      ? 
      this.state.result.queryResults[0] 
      : null 
    } 
</tboy>

來源

2017-08-24 08:21:13 sohamdodia

React.js組件運行error.Uncaught TypeError：無法讀取未定義的屬性'0'

回答

相關問題