將 typescript 與 react-redux 組件反應需要所有傳遞的道具

Question

所以我剛剛開始結合 react，redux (react-redux) 和 typescript。 但我似乎無法在這里弄清楚一些事情，即為什么App組件內的子組件需要我傳遞給App組件的所有道具。

應用組件：

const App = ({contacts, user, activeUserId}: ApplicationState) => (
    <div className="App">
        <Sidebar contacts={contacts} />
        <Main user={user} activeUserId={activeUserId}/>
    </div>
);

const getContacts = ({contacts, user, activeUserId}: ApplicationState) => ({contacts, user, activeUserId});
export default connect(getContacts)(App);

側邊欄組件：

const Sidebar = ({contacts}: ApplicationState) => {
    let contactsValues: Array<Contacts> = contacts && Object.values(contacts);

    return (
        <aside className="Sidebar">
            {contactsValues && contactsValues.map((contact: Contacts) => <User user={contact} key={contact.user_id}/>)}
        </aside>
    )
}

我認為沒有任何理由在這里列出Main組件，因為它只是一個空組件，但給出了相同的錯誤，所以我將在 go 前面列出Interfaces ：

export default interface Contacts {
    email: string,
    name: string,
    profile_pic: string,
    status: string,
    user_id: string
}

export default interface ApplicationState {
    contacts: Contacts,
    user: object,
    activeUserId: string | null
}

實際錯誤代碼：“TS2739：類型 '{ 聯系人：聯系人；}' 缺少來自類型 'ApplicationState' 的以下屬性：用戶，activeUserId”

因此，這兩個組件都要求將所有props 注入其中，即使它們在組件本身內部不是必需的。 如果我提供組件，一切正常，我不會出錯。

我很確定我的語法或類型的“接線”有問題。

我們是否還可以獲得解釋或鏈接到文檔/材料的鏈接，以幫助我們理解為什么會發生這種情況？

如果還有什么我應該包括的，請告訴我，我會提供！

編輯：

我實際上已經意識到顯示Main組件也很重要，因為這也會導致問題，而且你們建議的一些修復只修復Sidebar組件而不是Main 。

主要成分：

import React from "react";
import "./Main.scss";

import ApplicationState from "../../models/ApplicationState";

const Main = ({user, activeUserId}: ApplicationState) => {
    return (
        <main className="Main">
            Main Stuff
        </main>
    )
}

編輯：

從我對所有這些答案的試驗來看，我認為最好的解決方案是使接口中的所有內容都是可選的，但如果我這樣做，則Sidebar組件內的contactsValues變量會拋出： TS2322: Type 'any[] | undefined' 不可分配給類型 'Contacts[]'。 類型“未定義”不可分配給類型“聯系人 []”。 .

Answer 1

問題出在您剛剛傳遞聯系人並將其類型定義為 ApplicationState 的 Sidebar 組件中... 將 Sidebar 參數更改為：

const Sidebar = (contacts: Contacts) => { 
let contactsValues: Array<Contacts> = contacts && Object.values(contacts); 
return 
 ( <aside className="Sidebar"> 
   {contactsValues && contactsValues.map((contact: Contacts) =>
   <User user={contact} key={contact.user_id}/>
   )} 
  </aside> ) }

解決錯誤的另一種方法是將接口屬性設為可選：

更新

我認為接口還有一個問題：

export default interface Contact {   //It's a single object, So Contact is OK
 email: string,
 name: string,
 profile_pic: string,
 status: string,
 user_id: string
}
export default interface ApplicationState {
 contacts: Contact[],   // I guess you need an array of Contacts
 user?: object, 
 activeUserId?: string 
}

而且我認為由於初始化錯誤，您會遇到錯誤。 改成

let contactsValues: Array<Contacts> = contacts ? Object.values(contacts): [] as Contact[]; 

Answer 2

問題出在這個 function

const Sidebar = ({contacts}: ApplicationState) => {
    let contactsValues: Array<Contacts> = contacts && Object.values(contacts);

    return (
        <aside className="Sidebar">
            {contactsValues && contactsValues.map((contact: Contacts) => <User user={contact} key={contact.user_id}/>)}
        </aside>
    )
}

類型{ contacts: Contacts }與ApplicationState類型不同

如果您只想將聯系人傳遞給您的 function 您必須創建一個新類型或像這樣創建ApplicationState

    export default interface ApplicationState {
        contacts: Contacts,
        user?: object,
        activeUserId?: string | null
    }

Answer 3

將 Applicationstate 接口替換為：

 export default interface ApplicationState {
   contacts?: Contacts,
   user?: object,
   activeUserId?: string | null
}