React+TypeScript项目API数据控制台可见但页面无法渲染求助

我是React和TypeScript新手，正在开发一个从API提取数据并在网页展示的简单应用。查阅资料调试后已修复代码错误，但目前页面无法渲染任何数据，控制台能正常看到数据，我无法理解返回逻辑中为何出现空数组，恳请各位提供解决建议。

代码文件 #

App.tsx #

import { useEffect, useState } from 'react';
import './App.css';
import ApiProps ,{ DataApiResponse }from '../src/types'


function App() {
  const [Data , setData] = useState<DataApiResponse >({task:[]});  //ApiProps
  const [isLoading, setLoading] = useState(false);
  // const [error, setError] = useState(null);
 
  useEffect(()=>{
    setLoading(true)
    fetch(`https://jsonplaceholder.typicode.com/posts?_limit=8`)
     .then((response) => response.json())      
     .then((Data)=>{
      setData({ task: Data });
      console.log(Data)
    // setLoading(false)
     })
  },[]);

   if(isLoading) return <p> Loading ...Hello World</p>
   if(!Data.task.length) return <p> No data</p>

   return (
    <div className="contianer">

      <ul>{Data && Data.task?[].map((task:ApiProps)=>( 
        <>
        <li key ={task.id}>{task.id}</li>
        <li>{task.title}</li>
        <li>{task.userId}</li>
        <li>{task.body}</li>
        </>
      )):null }</ul>    
    </div>
    );

}

export default App;

Types.tsx #

export default interface ApiProps {
    id: number,
    title: string,
    userId:string,
    body:string
}

export interface DataApiResponse {
    task : ApiProps[]
}

Index.tsx #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
);

问题分析与解决步骤 #

1. Loading状态未关闭
   你在fetch成功回调里注释了setLoading(false)，导致isLoading一直为true，页面始终停在加载提示，不会进入数据渲染逻辑。取消这行代码的注释：

   .then((Data)=>{
      setData({ task: Data });
      console.log(Data);
      setLoading(false); // 恢复该行
   })
   

2. 遍历目标错误
   渲染时写的是[].map(...)，这是在遍历空数组，自然不会有内容输出。改成遍历Data.task：

   <ul>{Data && Data.task ? Data.task.map((task: ApiProps) => ( 
     <>
       <li key={task.id}>{task.id}</li>
       <li>{task.title}</li>
       <li>{task.userId}</li>
       <li>{task.body}</li>
     </>
   )) : null }</ul>
   

3. 类型定义不匹配
   ApiProps里的userId定义为string，但JSONPlaceholder返回的userId是数字，会导致TS报错，修正类型：

   export default interface ApiProps {
       id: number,
       title: string,
       userId: number, // 改为number类型
       body: string
   }
   

4. 可选优化：添加异常处理
   当前未处理请求失败的情况，建议补充错误捕获，避免页面异常：

   useEffect(()=>{
     setLoading(true)
     fetch(`https://jsonplaceholder.typicode.com/posts?_limit=8`)
      .then((response) => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })      
      .then((Data)=>{
       setData({ task: Data });
       console.log(Data);
       setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
        // 可添加错误提示逻辑
      })
   },[]);
   

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