如何在 ReactJS 中过滤来自 MongoDB 日期的数据 - JavaScript

在 ReactJS 中，我们可以使用 Array.prototype.filter() 方法来过滤来自 MongoDB 的日期数据。以下是一个简单的示例，展示了如何在 ReactJS 中过滤日期数据。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    try {
      const response = await axios.get('/api/data'); // 假设你的数据接口为 /api/data
      setData(response.data);
      setFilteredData(response.data);
    } catch (error) {
      console.log(error);
    }
  }

  function handleFilter(date) {
    const filtered = data.filter(item => {
      // 对日期进行过滤，只保留符合条件的项
      const itemDate = new Date(item.date);
      const filterDate = new Date(date);
      return itemDate > filterDate;
    });
    setFilteredData(filtered);
  }

  return (
    <div>
      <input type="date" onChange={e => handleFilter(e.target.value)} />
      <ul>
        {filteredData.map(item => (
          <li key={item._id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在上面的代码中，我们使用了 useState 来定义了两个状态变量 data 和 filteredData，分别用于保存从 MongoDB 获取到的原始数据和过滤后的数据。

在 fetchData 函数中，我们使用 axios 库发起了异步请求来获取数据，并将获取到的数据存储到 data 和 filteredData 状态变量中。

在 handleFilter 函数中，我们使用 Array.prototype.filter() 方法对日期进行过滤。只有在 itemDate 大于 filterDate 的情况下，我们才会保留该项数据。

最后，我们在 JSX 中渲染了一个日期选择器和一个用于展示过滤后数据的列表。每当日期选择器的值发生变化时，我们会调用 handleFilter 函数来重新进行数据过滤，并更新 filteredData 状态变量。

以上就是在 ReactJS 中过滤来自 MongoDB 日期数据的简单示例。你可以根据实际情况，修改和扩展这段代码来满足你的需求。