レンダリングメソッドから動的状態を設定できません反応するes6

Question

メソッドから動的状態を追加しようとしています。アイデアは、レンダリングメソッドからメソッドを呼び出すときに、動的な状態値を設定するパラメータ値を受け入れることです。

は、ここに私のコードです：

renderFeaturePermissionOptions(featureName) { 
    // Generate permission rules. 
    let viewPermission = featureName + "_view" 
    let createPermission = featureName + "_create" 
    let editPermission = featureName + "_edit" 
    let deletePermission = featureName + "_delete" 
    // Set states for all dynamic checkboxes. 
    this.setState({ [viewPermission] : true }) 
    this.setState({ [createPermission] : true }) 
    this.setState({ [editPermission] : true }) 
    this.setState({ [deletePermission] : true }) 
    return(
    <tr> 
     <td>{featureName}</td> 
     <td><input name={ featureName + "/selectAll" } type="checkbox" onChange={this.checkSiblingCheckBoxes}/></td> 
     <td><input name={ featureName + "/view" } type="checkbox"/></td> 
     <td><input name={ featureName + "/create" } type="checkbox"/></td> 
     <td><input name={ featureName + "/edit" } type="checkbox"/></td> 
     <td><input name={ featureName + "/delete" } type="checkbox"/></td> 
    </tr> 
) 
} 

私は、パラメータで指定した任意の経路名のためにこのメソッドを呼び出すことができ、それがパラメータ名として状態を作成するようにこのコードをリファクタリングしたいと思います。

それが完了したが、私はこの

{ this.renderFeaturePermissionOptions('Organization') } 

などのrenderメソッドからこのメソッドを呼び出すときには、無限ループを取り、このエラーが発生していないが：

どのように私renderFeaturePermissionOptions('Contact')のパラメータから来るこの状態をここで設定できますか？ - >呼び出し例。

Answer 1

レンダリング機能でsetStateを呼び出すことはできません。setStateを呼び出すと、render関数で呼び出した場合、コンポーネントは再びレンダリングされます。それは無限ループになります。

だから別のchildComponentとして書き込もうとするといいかもしれません。

Answer 2

レンダリングメソッドまたはレンダリング時に呼び出されるメソッドに状態を設定しないでください。

これはコードで正しくありません。

// Set states for all dynamic checkboxes. 
    this.setState({ [viewPermission] : true }) 
    this.setState({ [createPermission] : true }) 
    this.setState({ [editPermission] : true }) 
    this.setState({ [deletePermission] : true }) 

一部のライフサイクルメソッドまたはコンポーネントのユーザーアクションによって状態を設定します。

編集： はい、私は動的な状態がここに追加されているかを理解することはできませんあなたのコンポーネントのコンストラクタ

export default class TestComp extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      viewPermission : true, 
      createPermission] : true, 
      editPermission] : true, 
      deletePermission] : true 

     }; 
    } 
// Rest of your component methods such as render and others