Question

我是React的新手，我想做的是定期生成多个数字并更新视图：

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

如何在JSX中定义函数

1 个答案: