Question

所以我才刚刚开始将react，redux（react-redux）和打字稿结合起来。但是我似乎无法在这里弄清楚什么，也就是说，为什么 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 组件，因为它只是一个空组件，但给出相同的错误，因此我只列出接口：

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：类型'{contact：Contacts;}'缺少'ApplicationState'类型的以下属性：user，activeUserId“

因此，两个组件都要求将 all 个道具注入其中，即使在组件本身内部不需要它们。如果我提供了组件，一切都会正常，并且不会出错。

我很确定我的语法或类型的“接线”有问题。

我们还能获得文档/材料的解释或正确链接，以帮助我们了解为什么会发生这种情况吗？

如果还有其他应包括的内容，请告诉我，我会提供！

编辑：

我实际上已经意识到，显示 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>
    )
}

编辑：

根据我对所有这些答案的尝试，我认为最好的解决方案是使接口中的所有内容均为可选，但是如果执行此操作，则中的 contactsValues 变量侧边栏组件引发： TS2322：键入“ any [] | undefined”无法分配给“ Contacts []”类型。不能将类型'undefined'分配给类型'Contacts []'。。

Answer 1

问题出在您的补充工具栏组件上，您刚刚在其中传递了联系人并将其类型定义为ApplicationState ...将补充工具栏参数更改为：

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

问题出在此功能中

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

不同

如果要仅将联系人传递给函数，则必须创建一个新类型或使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
}

具有react-redux组件的React类型脚本需要所有传递的道具

3 个答案: