react筛选里面渲染数据

在React中进行数据筛选并渲染的常见做法是使用数组的filter()方法结合map()方法。

首先，你需要将数据存储在一个数组中，然后使用filter()方法筛选出符合特定条件的数据。接着，将筛选后的数据通过map()方法进行渲染。

以下是一个示例：

import React, { useState } from 'react';

const DataFilter = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Mike', age: 35 },
    // 其他数据...
  ]);

  const filteredData = data.filter(item => item.age > 30);

  return (
    <div>
      <h1>Filtered Data:</h1>
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>
            {item.name} - Age: {item.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DataFilter;