無法讀取null屬性'_currentElement'

我在做react-rails應用程序。我得到了這個奇怪的錯誤。似乎它是反應本身的問題。下面是我得到這個錯誤上下文：無法讀取null屬性'_currentElement'

var ChronicBox = React.createClass({ 

    getInitialState: function(){ 
     return {chronics: []} 
    }, 
    componentWillMount: function(){ 
     $.ajax({ 
    // some ajax call that setsState of chronicles 
     }); 
    }, 
    render: function(){ 
     return(
      <div className="chronics"> 
       <ChronicsList chronics={this.state.chronics.chronicsList} /> 
      </div> 
     ) 
    } 
});

和我ChronicsList樣子：

var ChronicsList = React.createClass({ 
    render:function(){ 
     console.log(this.props.chronics); 
     var chronics = this.props.chronics.map(function(chronic){ 
      return(
       <Chronic name={chronic.name}/> 
      ) 
     }); 

     return(
      <ul> 
       {chronics} 
      </ul> 
     ) 
    } 
});

從日誌中我看到這一點：

undefined 
can not read property .map of undefined 
Cannot read property '_currentElement' of null

我從他們身上看到最初狀態chronics爲null，因此.map不能被使用。然後當Ajax調用setsState我ChronicBox重新渲染和chronics包含JSON信息folosw：

{ 
    "chronicsList": [{ 
     "id": 1, 
     "name": "some allergy", 
     "patient_id": 2, 
     "created_at": "2016-02-11T19:05:33.434Z", 
     "updated_at": "2016-02-11T19:05:33.434Z" 
    }, { 
     "id": 2, 
     "name": "one more allergy", 
     "patient_id": 2, 
     "created_at": "2016-02-11T19:06:04.384Z", 
     "updated_at": "2016-02-11T19:06:04.384Z" 
    }], 
}

所以chronics在ChronicForm現在定義。但我沒有看到裏面ChronicForm props.chronics這些日誌，而不是我得到的錯誤：

Cannot read property '_currentElement' of null

有什麼辦法來解決這個問題呢？我看到這是一個反應問題，但它被關閉了。

來源

2016-02-11 yerassyl

正如你提到的，this.props.chronics爲空，所以地圖將無法正常工作。所以，反應是無法渲染你的組件。當數據重新加載並且chronics是一個數組時，這次反應能夠成功地調用渲染方法;但是當它嘗試將當前的虛擬DOM樹與前一個虛擬DOM樹進行比較時，它會因爲無法找到以前的DOM樹而失敗。

解決方法是在初始加載時傳遞一個數組。所以，你將有你的根組件的初始狀態設置爲：

getInitialState: function(){ 
    return { 
    chronics: { 
     chronicsList: [] 
    } 
    } 
},

來源

2016-02-11 21:40:24

我認爲當任何組件的渲染函數拋出一個錯誤時，你會得到這個錯誤。修復了.map錯誤，並且此錯誤可能會消失。

您可以用默認的道具修復.map問題：

getDefaultProps: function() { 
    return { 
    chronics: [] 
    }; 
}

來源

2016-02-11 21:33:10 nrabinowitz

我試圖渲染null在三元操作時有同樣的錯誤。渲染一個空字符串解決了這個問題：

{this.props.list.map((n) => { 
    return <option value={n.key} key={n.key}> 
       {n.title}{n.isDraft ? ' - (draft)' : null} 
      </option>; 
    }) 
}

來源

2017-03-22 11:00:48

無法讀取null屬性'_currentElement'

回答

相關問題