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有关