React遍历数组渲染Table无内容输出问题排查

你的代码存在三个直接导致渲染异常的问题：

• 普通局部变量无法触发视图更新：let ure = [{}]是组件每次渲染时都会重新初始化的普通变量，不是React可观测的响应式状态。异步接口返回后调用push修改数组，不会触发组件重渲染，页面自然不会展示更新后的数据。你看不到"No Data Found"提示，是因为首次渲染时ure初始值是长度为1的[{}]，从一开始就不会走空数据分支。
• map回调缺少返回值：渲染逻辑里的ure.map回调使用大括号包裹函数体，但没有显式return要渲染的<tr>元素，遍历后得到的是全为undefined的数组，无法渲染出任何DOM节点。
• 初始值异常：ure初始值设为[{}]，就算修复其他问题，首次渲染也会生成一行没有有效class_id的空表格行。

1. 将需要驱动视图更新的ure数组改为React state管理，初始值设为空数组
2. 接口返回数据时，调用state的更新方法修改数据，触发组件重渲染
3. 给map回调添加显式返回值，保证JSX能被正常返回渲染

修复后的完整代码：

// 状态定义
const [formData, setFormData] = useState([]);
const [ure, setUre] = useState([]);

useEffect(() => {
  axios
    .get("/api/listUre")
    .then((res) => {
      console.log(res.data)
      // 注意：如果res.data本身是数组，直接传入setUre(res.data)即可
      setUre([{
        class_id: res.data.class_id
      }]);
    })
    .catch((error) => {
      console.log(error);
    })
}, []);

// 表格渲染逻辑
{ure.length > 0 ?
  ure.map((obj, index) => {
    // 箭头函数用大括号包裹时必须显式return JSX
    return (
      <tr key={index}>
        <td>{obj.class_id}</td>
        <td>{obj.class_id}</td>
        <td>My Name</td>
      </tr>
    )
  })
  : "No Data Found"
}

注意：后续所有对ure的增删改操作，都必须通过setUre传入新的数组值完成，不要直接修改原state数组，否则依然会出现视图不更新的问题。

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