如何通过API获取node-persist存储的数据并在前端展示？

第一步：确保后端读取数据的API正确实现 #

首先检查你的Node.js后端是否有GET请求接口用于读取存储的任务数据，node-persist的读取逻辑需要先完成初始化再获取数据：

// 后端示例代码（补充GET接口）
const express = require('express');
const storage = require('node-persist');
const app = express();

// 初始化node-persist存储
(async () => {
  await storage.init({
    dir: 'tasks-storage', // 自定义存储目录，确保目录存在
    stringify: JSON.stringify,
    parse: JSON.parse,
  });
})();

// 已实现的POST存储接口（假设你已完成）
app.post('/api/tasks', async (req, res) => {
  const newTask = req.body;
  const tasks = await storage.getItem('tasks') || [];
  tasks.push(newTask);
  await storage.setItem('tasks', tasks);
  res.status(201).json(newTask);
});

// 新增GET读取接口
app.get('/api/tasks', async (req, res) => {
  try {
    const tasks = await storage.getItem('tasks') || [];
    res.status(200).json(tasks);
  } catch (err) {
    res.status(500).json({ error: '获取任务列表失败' });
  }
});

app.listen(3001, () => console.log('服务运行在3001端口'));

第二步：修复React ShowTasks组件的数据获取逻辑 #

组件失效通常是因为未正确发起异步请求、状态管理错误或未处理加载/异常状态，以下是修正后的组件代码：

import { useState, useEffect } from 'react';

function ShowTasks() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 组件挂载时请求数据
  useEffect(() => {
    const fetchTasks = async () => {
      try {
        const response = await fetch('http://localhost:3001/api/tasks');
        if (!response.ok) {
          throw new Error('获取任务失败');
        }
        const data = await response.json();
        setTasks(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchTasks();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  if (loading) return <div>加载任务中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <table border="1">
      <thead>
        <tr>
          <th>任务名称</th>
          <th>任务描述</th>
          {/* 根据你的任务结构调整列字段 */}
        </tr>
      </thead>
      <tbody>
        {tasks.map((task, index) => (
          <tr key={index}>
            <td>{task.name}</td>
            <td>{task.description}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default ShowTasks;

常见问题排查 #

• 跨域问题：如果前端和后端端口不同，需在后端配置CORS，安装cors包并启用：

  const cors = require('cors');
  app.use(cors());
  

• node-persist初始化问题：确保storage.init()异步执行完成后再处理请求，避免读取到空数据。
• 数据结构一致性：确认后端存储的任务字段和前端渲染时使用的字段一致（比如后端存task.title，前端不要误用task.name）。
• 请求地址错误：检查fetch的URL是否和后端服务的地址、端口完全匹配。

内容的提问来源于stack exchange，提问作者Arpit Gupta