将 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
}