如何使用React JS中的循環來渲染或不渲染基於條件的表數據？

Question

我正在使用React.js進行練習，並且無法遍歷數據數組，並根據每個數據節點中的屬性選擇性地呈現元素。

該數據集的格式是這樣的：

var requests = [ 
    {"id":1, "title":"request","updated":"2015-08-15","created":"2015-08-12","status":"Denied"}, ...] 

我的渲​​染代碼正在尋找一個標誌值，以確定哪些應該或不應該渲染。邏輯工作正常（即當它應該返回true或false時，la console.log），但用JSX編寫的渲染代碼給我帶來麻煩。這是我在TBODY節至今：

  <tbody>  
      {requests.map(function(row, i) { 
       {filter === requests[i].status || filter === "" ? 
       <tr key={i}> 
        <td style={tdStyle}>{row.title}</td> 
        <td style={tdStyle}>{row.status}</td> 
        <td style={tdStyle}>{row.created_at}</td> 
        <td style={tdStyle}>{row.updated_at}</td> 
        <td style={tdStyle}><a href="">delete</a></td> 
       </tr> 
       : null} 
      })} 
      </tbody> 

我已經看過this link指導，但它似乎並不奏效。

任何幫助將不勝感激！

Answer 1

const requests = [ 
    {"id":1, "title":"Request from Nancy","updated_at":"2015-08-15 12:27:01 -0600","created_at":"2015-08-12 08:27:01 -0600","status":"Denied"}, 
    {"id":2, "title":"Request from David","updated_at":"2015-07-22 11:27:01 -0600","created_at":"2015-07-15 12:27:01 -0600","status":"Approved"} 
]; 

const jsx = function(filter) { 

    const isCorrectStatus = (x) => x.status === filter; 

    return <tbody>  
     {requests.filter(isCorrectStatus).map(function(row, i) { 
      return <tr key={i}> 
       <td>{row.title}</td> 
       <td>{row.status}</td> 
       <td>{row.created_at}</td> 
       <td>{row.updated_at}</td> 
       <td><a href="">delete</a></td> 
      </tr> 
     })} 
    </tbody> 
} 

const filter = 'Denied'; 
ReactDOM.render(jsx(filter), document.getElementById('app')); 

我把它改寫如下，我們有一個預置的過濾方法，我們不妨用它，而不是重新實現輪，它使我們的代碼乾淨了一點。

Answer 2

正如我在我的評論中提到的，您需要返回計算值，這允許map()函數正常工作。

此外，在這種情況下，我將使用filter()函數僅映射滿足條件的元素。

<tbody> 
    // use the filter function to get only the matching elements before mapping 
    {requests.filter(function(row){ 
    // return true to include array element, false to exclude 
    return (filter === row.status || filter === ""); 
    }).map(function(row, i) { 
     // always wrap jsx in parentheses because of line breaks in javascript syntax 
     // make sure to return, this actually adds it 
     return (
     <tr key={i}> 
      <td style={tdStyle}>{row.title}</td> 
      <td style={tdStyle}>{row.status}</td> 
      <td style={tdStyle}>{row.created_at}</td> 
      <td style={tdStyle}>{row.updated_at}</td> 
      <td style={tdStyle}><a href="">delete</a></td> 
     </tr> 
    ); 
    })} 
</tbody>