react做一个多条件筛选mock数据怎么写

在React中，要实现多条件筛选mock数据，你可以创建一个函数组件，并利用JavaScript的对象、数组以及条件判断来动态生成数据。这里是一个简单的例子：

import React, { useState } from 'react';

const mockData = [
  {
    id: 1,
    name: "数据1",
    category: "类别A",
    condition1: "符合条件1",
    condition2: "符合条件2"
  },
  // 更多数据...
];

const FilteredData = () => {
  const [filteredData, setFilteredData] = useState(mockData);
  const [condition1, setCondition1] = useState('');
  const [condition2, setCondition2] = useState('');

  const handleFilter = (value) => {
    let filtered = mockData;
    
    if (value) {
      filtered = filtered.filter(item => item.condition1 === value || item.condition2 === value);
    }

    setFilteredData(filtered);
  };

  return (
    <div>
      <input type="text" value={condition1} onChange={(e) => handleFilter(e.target.value)} placeholder="输入条件1" />
      <input type="text" value={condition2} onChange={(e) => handleFilter(e.target.value)} placeholder="输入条件2" />

      {filteredData.map((item, index) => (
        <div key={index}>
          <p>ID: {item.id}</p>
          <p>Name: {item.name}</p>
          <!-- 根据实际需求展示更多属性 -->
        </div>
      ))}
    </div>
  );
};

export default FilteredData;