使用Axios Async Await+TypeScript从API取数后表格渲染异常问题

核心错误点： #

1. 状态赋值错误：API返回的res.data本身就是长度为1的数组，你却用setTableData([res.data])再包裹一层数组，导致tableData变成嵌套数组[[{results: [...]}]]。
2. 状态调用错误：渲染表格时错误地将状态tableData当作函数调用（tableData()），它实际是数组，直接使用tableData即可。
3. 数据层级错误：需要渲染的23条数据在res.data[0].results里，你没有正确获取该层级的数据。
4. useEffect依赖冗余：setTableData和setLoading是React useState返回的稳定函数，无需加入依赖数组。

修正后的代码： #

1. API调用部分

const [tableData, setTableData] = React.useState<any[]>([]);
const [loading, setLoading] = React.useState(true);

React.useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await axios.get(baseURL);
        // 直接取目标层级的results数组作为表格数据源
        setTableData(res.data[0].results);
        console.log(res.data[0].results);
      } catch (error) {
        console.error(error.message);
      }
      setLoading(false);
    };
    fetchData();
  }, [baseURL]); // 移除不必要的依赖

2. 表格渲染部分

{loading ?
  <LoadingData />
  :
  (tableData.length === 0 ?
    <NoResults />
    :
    tableData.map((item, id) => (
      <TableRow key={id} > {/* 用循环id或item的唯一标识作为key */}
        <TableCell>
          {item.name}
        </TableCell>
      </TableRow>
    ))
  )
}

补充说明： #

• TypeScript环境下建议给tableData定义明确类型，避免使用any，示例：

  interface TableItem {
    name: string;
    // 补充其他字段类型
  }
  const [tableData, setTableData] = React.useState<TableItem[]>([]);
  

• 确认item.name确实存在于results数组的每个元素中，这也是之前出现空白行的原因之一。

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