如何JSX

Question

定義功能我非常新的反應，我想要做的是定期地產生一些數字和更新視圖：

<script type="text/jsx"> 
     var ChartFrame = React.createClass({ 
     datagenerator: function(n, itvl){ 
      function randomD(){ 
      data2fill = []; 
      for(var i=0; i<n; i++){ 
       data.push(Math.random()*10); 
      } 
      this.setState({ 
       "data": data 
      }); 
      } 
      var counter = setInterval(randomD, itvl); 
      return counter; 
     }, 
     getInitialState: function(){ 
      return { 
      data:(function(){ 
       this.state.counter = this.datagenerator(5, 1000); 
       return []; 
      })() 
      } 
     }, 
     render: function(){ 
      var ds = this.state.data; 
      var divs = ds.map(function(d, i){ 
      return <div> d </div>; 
      }); 
      return (
      {divs} 
     ); 
     } 
     }); 
     React.render(<ChartFrame />, document.body); 
<script> 

不過，我得到以下錯誤信息：

未捕獲TypeError：this.datagenerator不是函數

我想知道什麼是在JSX中定義函數的正確方法？

Answer 1

你聲明你的函數的方法是正確的，但你的整個getInitialState被搞砸了，喲。

這裏期望的行爲是什麼？既然你已經聲明瞭一個新的函數，它將無法訪問正確的this這將是組件，除非你是.bind()它。不確定它做什麼或如何工作，請閱讀this great article。代碼如下

return { 
    data:(function(){ 
     this.state.counter = this.datagenerator(5, 1000); 
     return []; 
    }.bind(this))() 
} 

但是這樣做會產生另一個錯誤的你，this.state是undefined因此你將無法設置counter上this.state。

this.state從未在getInitialState中設置，因爲該函數的工作是產生該狀態。同時你要返回一個空數組到數據，這將導致this.state.data是一個空數組。

此外，您可能想要在生命週期方法#componentDidMount內啓動datagenerator函數，以便狀態已被設置併發生了第一個渲染。

而作爲一個免費的治療，your code in action！