React无法渲染Node.js返回的JSON表格数据，需实现团队过滤

核心问题梳理 #

你的代码存在几个关键问题导致表格无法正常渲染：

1. 表格渲染时错误引用数据源，循环中使用data.name而非当前项el.name
2. 循环内重复生成<tbody>，违反HTML表格结构规范
3. React列表渲染缺少唯一key属性
4. 异步请求中loading状态更新时机错误
5. setState异步特性导致无法立即获取最新数据
6. 过滤逻辑嵌套在循环中，代码可读性差且易出错

修正后的完整代码 #

1. 组件渲染部分

import { useState, useEffect } from 'react';
import Select from 'react-select';

// 假设teams选项结构符合react-select要求
const teams = [
  { value: 'Greeters', label: 'Greeters' },
  { value: 'Cleaning', label: 'Cleaning' }
];

const YourComponent = () => {
  const [data, setData] = useState([]);
  const [team, setTeam] = useState('');
  const [loading, setLoading] = useState(false);

  // 提前过滤数据，避免循环内嵌套判断
  const filteredData = data?.filter(item => item.team === team) || [];

  // Select组件回调
  const handleSelect = (selectedOption) => {
    setTeam(selectedOption.value);
  };

  // 异步请求数据
  const viewData = async () => {
    setLoading(true);
    try {
      const response = await axios({
        method: 'get',
        url: myurl,
        headers: {
          "Content-type": "application/json"
        },
      });
      const result = response.data.rows;
      setData(result);
    } catch (error) {
      console.error('数据请求失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 监听data变化，查看最新状态
  useEffect(() => {
    console.log('更新后的数据源:', data);
  }, [data]);

  return (
    <>
      <Select
        className='SelectTeam'
        closeMenuOnSelect={true}
        // components={animatedComponents} // 确保animatedComponents已正确定义
        isMulti={false}
        options={teams}
        name='team'
        onChange={handleSelect}
      />
      <br />
      
      {loading ? (
        <div>加载中...</div>
      ) : (
        <table className='dvTable'>
          <thead className='DVthead'>
            <tr className='DVtr'>
              <th className='DVth'>Name</th>
              <th className='DVth'>Team</th>
              <th className='DVth'>Preference</th>
              <th className='DVth'>Taken</th>
            </tr>
          </thead>
          <tbody>
            {filteredData.map((el) => (
              <tr key={el.id} className='DVtr'>
                <td className='DVtd'>{el.name}</td>
                <td className='DVtd'>{el.team}</td>
                <td className='DVtd'>{el.preference}</td>
                <td className='DVtd'>{el.taken ? 'Yes' : 'No'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </>
  );
};

export default YourComponent;

关键修改说明 #

• 提前过滤数据：用filter方法预先筛选出符合选中团队的数据，代码更简洁易维护
• 修正数据引用：将data.name改为el.name，正确获取循环项的属性值
• 规范表格结构：所有数据行放在同一个<tbody>内，符合HTML标准
• 添加唯一key：用每条数据的id作为key，确保React列表渲染的性能和正确性
• 修复loading状态：将setLoading(false)放在finally块中，确保请求无论成功失败都会关闭加载状态
• 异步状态监听：用useEffect监听data变化，才能获取到最新的状态值（setState是异步操作）
• 优化布尔值显示：将el.taken转换为"Yes/No"，提升用户可读性

内容的提问来源于stack exchange，提问作者Prajwal Abraham