React Typescript 中的類型不存在屬性

Question

I am currently learning TypeScript in React so i was working on learning how to make API request with typescript I am fetching a single data by Id the result of the api request is displaying on my web page but i encountered an error the typescript compiler is saying屬性不存在這里是我的代碼

import { To, useParams } from "react-router-dom";
import axios from "axios";
import { useState, useEffect } from "react";
const SinglePOST = () => {
  type Todo = {
    title: string;
    body: string;
    userId: number;
    id: number;
  };
  const { id } = useParams();
  const [data, setData] = useState<Todo[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [isError, setError] = useState<any>(null);
  useEffect(() => {
    const singleReq = async () => {
      try {
        setLoading(true);
        const res = await axios.get<Todo[]>(
          `https://jsonplaceholder.typicode.com/posts/${id}`,
        );

        await setData(res.data);
        console.log(res.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    singleReq();
  }, [id]);

  return (
    <div className=' w-full h-screen bg-slate-900 text-neutral-300 p-4'>
      <div className='w-full flex justify-center '> Single Post {id}</div>
      {loading && <p>...Loading</p>}
      {isError && <p> Error in getting post</p>}

      <div className='text-2xl'> {data.title}</div>
      <div className=' text-xl'> {data.body}</div>
    </div>
  );
};

export default SinglePOST;

這是它顯示的錯誤

類型“Todo []”上不存在屬性“標題”

類型“Todo []”上不存在屬性“body”

Answer 1

因為您的數據是單個 object 但您將數據定義為對象列表。

import { To, useParams } from 'react-router-dom';
import axios from 'axios';
import { useState, useEffect } from 'react';
const SinglePOST = () => {
    type Todo = {
        title: string;
        body: string;
        userId: number;
        id: number;
    };
    const { id } = useParams();
    const [data, setData] = useState<Todo>();
    const [loading, setLoading] = useState<boolean>(false);
    const [isError, setError] = useState<any>(null);
    useEffect(() => {
        const singleReq = async () => {
            try {
                setLoading(true);
                const res = await axios.get<Todo>(
                    `https://jsonplaceholder.typicode.com/posts/${id}`
                );

                await setData(res.data);
                console.log(res.data);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        };
        singleReq();
    }, [id]);

    return (
        <div className=' w-full h-screen bg-slate-900 text-neutral-300 p-4'>
            <div className='w-full flex justify-center '> Single Post {id}</div>
            {loading && <p>...Loading</p>}
            {isError && <p> Error in getting post</p>}

            <div className='text-2xl'> {data?.title}</div>
            <div className=' text-xl'> {data?.body}</div>
        </div>
    );
};

Answer 2

您已將類型設置為 state 作為 Todo 對象列表，因此出現錯誤。

 const [data, setData] = useState<Todo[]>([]);

您的 get 請求是否返回一系列待辦事項？ 如果是，那么您需要通過它們 map：

 { data.map((todo, idx) => { return ( <div key={idx}> <div className='text-2xl'> {data.title}</div> <div className=' text-xl'> {data.body}</div> </div> ) }); }

如果您的獲取請求返回待辦事項 object，那么您需要更改 state 上的類型：

 const [data, setData] = useState<Todo>();