FS访问api和React:重复条目

import React, { useState, useEffect } from 'react';
import fs from 'fs';
import path from 'path';

function DataList() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 异步读取文件内容
    fs.readFile(path.join(__dirname, 'data.json'), 'utf8', (err, content) => {
      if (err) {
        console.error('Error reading file:', err);
        return;
      }
      try {
        const jsonData = JSON.parse(content);
        // 去除重复项
        const uniqueData = Array.from(new Set(jsonData.map(item => item.id)))
          .map(id => jsonData.find(item => item.id === id));
        setData(uniqueData);
      } catch (parseErr) {
        console.error('Error parsing JSON:', parseErr);
      }
    });
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataList;