Reactを使用してテーブルの行を削除するにはどうすればよいですか？

Question

私は、マテリアルUIのテーブルコンポーネントであるテーブルを持っています。私はAPIからデータを取り出して、そのデータを表に表示します。表は、Webソケットから受け取ったイベントに基づいてすべての行を更新します。私の要件は、ID 10の行がClosedという行の値の1つを持っていて、その特定の行をテーブルから削除したい場合です。 私は、APIからのデータを格納する配列を使用してマップ（）を使用して個々の行に描画します。

mapTableData = (TableData) => { 
const newTableData = tempTableData.map((item, index) => ({ 
    ...item, 
    Column1:() => 
    <p> 
     {item.parameter1} 
    </p>, 
    Column2:() => 
    ........ 

イベントは、ウェブソケットとの値に到達{item.parameter1}私はテーブルから、その特定の行を削除する「クローズ」に変化します。これをどのように実装するのですか？私はすべての列の条件チェックを使用してみましたが、それは私に空白の行を与え、それを削除しないでください。

Answer 1

あなたは二度の項目を反復なるfilterを使用することができます。

const render = (tableData) => { 
    return tableData 
     .filter(row => row.id !== 10) 
     .map(row => { 
      // render logic 
     }) 
} 

のか、より効率的に、reduceを使用します。

const render = (tableData) => { 
    return tableData 
     .reduce((aggr, row) => { 
      if (row.id !== 10) { 
       const jsx = ''; // some logic 
       aggr.push(jsx); 
      } 

      return aggr; 
     }, []); 
}