Object 組件作為 Prop React Typescript

Question

我有一個類型數據：

導出類型數據 = {

    id:Number;
    name:String;
    username:String;
    email:String;
    phone:String;
    website:String;

}

我想從 api 獲取數據。我正在使用 typescript，所以數據是一個道具：

const App  = ()=>{
  const url = "https://jsonplaceholder.typicode.com/users/1";
 
  const [userData, setUserData] =  useState<Data[]>([]);

  const getUserData = async () => {
    let response = await fetch(url);
    let json = await response.json();
    setUserData(json);
  };

  useEffect(() => {
    getUserData();
  }, []);
  return (
    <div>
      <h2>User Data</h2>
   
          <div>
            {userData.map( (item,index)=>{
             return(
              <div key={index}>
               <strong>Name: </strong>
            {item.name}
         
            <strong>Website: </strong>
            {item.website}
         
         
            <strong>Email: </strong>
            {item.email}
         
         
            <strong>Phone: </strong>
            {item.phone}
            </div>
             )

            } )}
        </div>
    </div>
    )
}

我在我的代碼中遇到錯誤 'userData.map' is not a function 並且我不想使用setUserData([json]) 。 有其他選擇嗎？

Answer 1

從端點看不清楚，但如果您從中獲取單個數據元素，則可以：

• 存儲執行setUserData([json])的數據，這是完全正確的。 您也可以先創建數組，然后推送數據，但這實際上只會讓代碼變長。

• 改變你存儲數據的方式，因為你沒有元素數組，所以你可以這樣做：

const App  = ()=>{
  const url = "https://jsonplaceholder.typicode.com/users/1";
 
  const [userData, setUserData] =  useState<Data | undefined >(undefined);

  const getUserData = async () => {
    let response = await fetch(url);
    let json = await response.json();
    setUserData(json);
  };

  useEffect(() => {
    getUserData();
  }, []);
  return (
    <div>
      <h2>User Data</h2>
   
          <div>
            {userData ? (<div>
               <strong>Name: </strong>
            {userData.name}
         
            <strong>Website: </strong>
            {userData.website}
         
         
            <strong>Email: </strong>
            {userData.email}
         
         
            <strong>Phone: </strong>
            {userData.phone}
            </div>
             ) : null
            }
        </div>
    </div>
    )
}

---

以前版本問題的舊答案

如果 json 的形狀為Data[] （即返回多個對象），您只需要執行setUserData(json) 。 無需執行 map 即可在 state 上設置數據。

相反，如果 json 具有形狀Data （即返回單個對象），那么您需要在將其設置為 state 之前在數組中設置該 object。更直接的方法是您在最后建議使用setUserData([json])但是您也可以先創建數組，然后將數據推送到數組，如下所示：

let json = data;
const dataArray = [];
dataArray.push(json);
setUserData(dataArray);

如果你能更具體一點就更好了::

• 端點的返回類型
• 一般來說，您想實現什么，將數據原樣存儲在 state 中？將其存儲為數組？ 還有什么？ 為什么與使用.map有關