物件陣列的型別和介面設定錯誤

使用擴展運算子創建了一個新的物件陣列。

我正在嘗試通過此使用地圖，但我認為型別的定義不正確。

我覺得看redux toolkit react code，介面PostState部分的定義好像是無效的。但我不知道如何解決

使用redux工具包，類加載完畢后，使用spread算子將資料做成一個新陣列。

資料

您要實作的代碼

 {cartegory && cartegory.map((value, index) => {
       return (
           <Tab label={value.snippet.title} {...a11yProps(index)} key={value.id} />
       )
 })}

問題

型別“{}”上不存在屬性“片段”。TS2339

打字稿型別

export type cartegory = {
    kind: string
    etag: string
    id: string
    snippet: {
        publishedAt: string
        channelId: string
        title: string
        description: string
        thumbnails: {
            default: {
                url: string
                width: number
                height: number
            }
            medium: {
                url: string,
                width: number,
                height: number
            }
            high: {
                url: string,
                width: number,
                height: number
            }
            standard: {
                url: string,
                width: number,
                height: number
            }
            maxres: {
                url: string,
                width: number,
                height: number
            }
        }
        channelTitle: string,
        playlistId: string,
        position: 0
        resourceId: {
            kind: string,
            videoId: string
        }
        videoOwnerChannelTitle: string
        videoOwnerChannelId: string
    }
}[]

redux 工具包 react ts 代碼

import type { PayloadAction } from "@reduxjs/toolkit";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { youTubeAcsses } from '../apis/keys';
import { youtubeResponse, cartegory } from "../getTypes";

interface PostState {
    loading: boolean;
    error: string | null;
    data: youtubeResponse | null;
    cartegory: cartegory | {}[]
}

const initialState = {
    loading: false,
    error: null,
    data: null,
    cartegory : []
} as PostState;

// ACTION
export const youtubeList_Playlist = createAsyncThunk(
    "GET/YOUTUBE_CHANNELID",
    async (channelId: string, thunkAPI) => {
        try {
            const { data } = await axios.get<youtubeResponse>(
                `https://www.googleapis.com/youtube/v3/playlists?key=${youTubeAcsses.apiKey}&channelId=${channelId}&part=snippet&maxResults=30`
                // channelId=UCvpIHsNLXfpOj_uMgI62I2A - ??? ??? ?? ??? ??
            )
            return data
        } catch (err: any) {
            return thunkAPI.rejectWithValue({
                errorMessage: '??? ??????.'
            })
        }
    }
);

// SLICE
const youtube_PlaylistSlice = createSlice({
    name: "YOUTUBE_PLAYLIST",
    initialState,
    reducers: {},
    // createAsyncThunk ?? ?? = extraReducers
    extraReducers(builder) {
        builder
            .addCase(youtubeList_Playlist.pending, (state, action) => {
                state.loading = true;
            })
            .addCase(youtubeList_Playlist.fulfilled, (state, action: PayloadAction<youtubeResponse>) => {
                state.loading = false;
                state.data = action.payload;
                state.cartegory = [...state.data.items, ...action.payload.items]
            })
            .addCase(youtubeList_Playlist.rejected, (state, action: PayloadAction<any>) => {
                state.error = action.payload;
            });
    },
});


export default youtube_PlaylistSlice.reducer;

請給我一些建議

uj5u.com熱心網友回復：

interface PostState {
    loading: boolean;
    error: string | null;
    data: youtubeResponse | null;
    cartegory: cartegory | {}[] // <-- here
}

該型別cartegory | {}[]意味著值可以是cartegory空物件陣列或空物件陣列。而那些空物件沒有snippet屬性。

您可以洗掉它| {}[]以使其簡單：

interface PostState {
    loading: boolean;
    error: string | null;
    data: youtubeResponse | null;
    cartegory: cartegory // <-- here
}

或者，您可以在訪問之前檢查該屬性是否存在。

        {cartegory && cartegory.map((value, index) => {
            if ('snippet' in value) {
                return (
                    <Tab label={value.snippet.title} {...a11yProps(index)} key={value.id} />
                )
            }
            return null
        })}

標籤：反应打字稿redux 工具包

上一篇：如何呈現來自products.productId的嵌套資訊？

下一篇：我想加入注冊時如果我在我的ID中輸入韓語回傳false的功能，但它并不適用