如何使用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>