renderメソッドのreact const変数をループする方法

Question

私はrenderメソッドで自分のリターンに注入するためにマップされたconst変数を持っています。私の問題は今、私がマッピングしているオブジェクトは、オブジェクト自体のコレクションを持っています。私は各1をループしたいとJSX構文で追加することになります。これは、私が持っているものです。

const tasks = this.state.tasks.map((task) => { 
 
      var editable = this.state.editableTasks.filter(id => id === task.Id).length > 0; 
 
      return (
 
       <li key={task.Id} className="list-group-item" style={{minHeight: '50px'}}> 
 
        <div className="pull-left" style={{width: '50%'}}> 
 
         {editable ? <input type="text" /> : <span>{task.Name}</span>} 
 
        </div> 
 
        <div className="pull-right" style={{marginTop: '-5px', width: '50%'}}> 
 
         <div className="pull-right"> 
 
          <button className="btn btn-default" onClick={() => {this.AddSubTask(task.Id)}}>Add</button> 
 
          <button className="btn btn-default" onClick={() => { this.EditTask(task.Id)}}>{editable ? 'Save' : 'Edit'}</button> 
 
         </div> 
 
        </div> 
 
       </li> 
 
       
 
      //What I have currently tried: 
 
      //for(var i = 0; i < task.SubTasks.length; i++) { 
 
       //<ul> 
 
       //<li> 
 
       //...etc 
 
       //</li> 
 
       //</ul> 
 
      //} 
 

 
      //{task.SubTasks.map((subtask) => { 
 
       //<ul> 
 
       //<li> 
 
       //...etc 
 
       //</li> 
 
       //</ul> 
 
      //)}; 
 
      ); 
 
     }); 
 
     return (
 
      <div className="table-wrapper"> 
 
      <div className="task-container"> 
 
       <h3>{this.props.rowName}</h3> 
 
      </div> 
 
      <ul id="tasksContainer"> 
 
       {tasks} 
 
       <li className="list-group-item list-group-item-last"><input type="button" value="Add Task" onClick={this.createTask.bind(this)} className="btn btn-success btn-override" /></li> 
 
      </ul> 
 
      </div> 
 

 
    );

私はフォーマットに謝罪ん、かなり右にそれを得ることができませんでした。とにかくconstタスク=宣言で、私は各task.SubTasks（インデックスされたコレクションのコレクション）をループし、別の順序付けられていないリストを追加したいと思います。

私は単純にforループを作成しようとしましたが、うまくいかず、別のマッピングされた関数も書き込もうとしましたが、どちらも機能しませんでした。これは実行可能ですか？

Answer 1

別のマップが動作するはずです。空の配列を最初に作成し、それにコンポーネントをプッシュすると、forループはになる可能性があります。

const subTaskComponents = [] 
for (var i = 0; i < task.SubTasks.length; i++) { 
    subTaskComponents.push(
    <ul key={task.SubTasks[i].id> 
     <li>..</li> 
    </ul> 
) 
} 

map

const subTaskComponents = task.SubTasks.map(subTask => 
    <ul key={subTask.id}> 
    <li>..</li> 
    </ul> 
) 

は、その後、あなたが内部tasksでそれをあなたが持っているのと同じ方法を使用することができ、いずれの場合にレンダリングするのに、よりよい解決策です：

render() { 
    const tasks = this.state.tasks.map((task) => { 
    const subTaskComponents = task.SubTasks.map(subTask => 
     <ul key={subTask.id}> 
     <li>..</li> 
     </ul> 
    ) 

    return (
     <div>{subTaskComponents}</div> 
    ) 
    } 

    return (
    <div>{tasks}</div> 
) 
}