Как обновить состояние вне Render?

Question

Насколько я понимаю, это решение Redux должно решить, но пока я пытаюсь сделать эту работу без него.

Когда я запускаю это, я понимаю, что он застрял в шаблоне. Когда я бегу render это вызывает updateState() который изменяет состояние, что вызывает повторное рендеринга, который вызывает updateState() и так далее ...

Я получаю сообщение об ошибке:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount. 

Что componentWillMount делать? Какой был бы лучший способ структурировать это, поэтому, когда я вызываю <CreateRows />, он обновит состояние, но избежит цикла?

var CreateRows = React.createClass({ 
    updateState : function(){ 
     this.setState({ 
      'people' : [{'name':'something_else', 'email':'test2@gmail.com'}] 
     }); 
     return (
       <tr> 
        <td>Morgan</td> 
        <td>test@gmail.com</td> 
       </tr> 

      ) 
    } 

    render: function(){ 
     return (
      <tbody> 
       {this.updateState()} 
      </tbody> 
     ) 
    } 
}); 

Answer 1

Не рекомендуется обновлять состояние на render, но после того, как компоненты оказаны вы можете обновить его, например, с помощью componentDidMount метода:

var CreateRows = React.createClass({ 
    updateState : function(){ 
     this.setState({ 
      'people' : [{'name':'something_else', 'email':'test2@gmail.com'}] 
     }); 
    }, 
    componentDidMount: function() { 
     this.updateState(); 
    }, 
    render: function() { 
     return (
      <tbody> 
       <tr> 
        <td>Morgan</td> 
        <td>test@gmail.com</td> 
       </tr> 
      </tbody> 
     ); 
    } 
});