React数据获取后如何筛选显示errore=true的nameProcesso和id

问题分析 #

你的代码存在几个关键问题：

• Errore变量定义在useEffect内部，外部无法访问，导致渲染时的判断逻辑失效
• switch的使用逻辑错误，不能通过switch(item)来判断条目的errore属性
• 表格结构不合理，所有内容塞在一个单元格里，不符合表格的使用规范
• 数据处理可以更简洁，无需手动拼接字符串再转JSON

修正后的代码 #

import { useEffect, useState } from 'react';
import axios from 'axios';
// 注意：需导入样式文件，原代码中用到了但未声明导入
import styles from './你的样式文件路径.module.css';

export default function Fetch() {
  'use client';
  const [errorProcesses, setErrorProcesses] = useState([]); // 重命名state，语义更清晰

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          'https://run.mocky.io/v3/f3bf41f3-c60a-47f8-9386-243989bead65'
        );
        // 兼容接口返回单个对象或数组的情况，直接筛选errore为true的条目
        const data = Array.isArray(response.data) ? response.data : [response.data];
        const filteredItems = data.filter(item => item.errore === true);
        setErrorProcesses(filteredItems);
      } catch (err) {
        console.error('数据获取失败:', err);
      }
    };
    fetchData();
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th className={styles.colonnaErrori}>PROCESSO</th>
          <th className={styles.colonnaErrori}>ID</th>
        </tr>
      </thead>
      <tbody>
        {/* 遍历筛选后的错误流程，每个条目对应一行 */}
        {errorProcesses.map((item) => (
          <tr key={item.id} className={styles.righeErrori}>
            <td>{item.nameProcesso}</td>
            <td>{item.id}</td>
          </tr>
        ))}
        {/* 无错误条目时显示提示 */}
        {errorProcesses.length === 0 && (
          <tr>
            <td colSpan={2}>暂无错误流程</td>
          </tr>
        )}
      </tbody>
    </table>
  );
}

关键修改点 #

1. State语义化优化：将appState重命名为errorProcesses，明确存储的是错误流程数据
2. 数据处理逻辑简化：
   • 兼容接口返回单个对象或数组的情况
   • 使用filter提前筛选出errore: true的条目，减少渲染阶段的逻辑处理
   • 添加请求错误捕获，避免页面因请求失败崩溃
3. 表格结构规范：
   • 拆分表头为“PROCESSO”和“ID”两列，符合表格展示逻辑
   • 每个错误流程对应一行，使用item.id作为列表渲染的唯一key
   • 添加空状态提示，提升用户体验
4. 移除无效逻辑：删除了原代码中作用域错误的Errore变量和无效的switch判断

内容的提问来源于stack exchange，提问作者giorgia dc