Javascript 带有React-redux组件的React-typescript需要所有传递的道具

所以我刚刚开始将react、redux（react-redux）和typescript结合起来。但我似乎不明白，为什么应用程序组件中的子组件需要我传递到应用程序组件中的所有道具

应用程序组件：

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

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

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

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

实际错误代码：“TS2739:类型“{contacts:contacts；}”缺少类型“ApplicationState”中的以下属性：user，activeUserId”

因此，这两个组件都要求将所有的道具注入其中，即使组件本身并不需要这些道具。如果我提供组件，一切正常，没有错误

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

我们还可以得到一个解释或一个体面的文档/资料链接，帮助我们理解为什么会发生这种情况

如果还有什么，我应该包括请让我知道，我会提供

编辑：

事实上，我已经意识到显示主组件也很重要，因为这个组件也会导致问题，你们建议的一些修复只修复边栏组件，而不修复主组件

主要组成部分：

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

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

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

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

从“React”导入React；
导入“/Main.scss”；
从“../../models/ApplicationState”导入应用程序状态；
常量Main=（{user，activeUserId}:ApplicationState）=>{
返回(
主要材料
)
}

编辑：

---

从我对所有这些答案的实验来看，我认为最好的解决方案是使接口中的所有内容都是可选的，但是如果我这样做，那么边栏组件中的ContactsValue变量抛出：TS2322:Type'any[]| undefined'不能分配给Type'Contacts[]。类型“undefined”不可分配给类型“Contacts[]”。…

问题在于侧栏组件，您刚刚传递了Contacts并将其类型定义为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> ) }

我认为你会因为错误的初始化而出错。改为

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

let contacts值：数组=联系人？对象。值（联系人）：[]作为联系人[]；

问题出在这个函数中

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

---

将Applicationstate接口替换为以下内容：

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

---

Hello@s.hesam，如果我这样做，我会在边栏组件中得到以下错误：“TS2322:Type'any[]| undefined'不可分配给Type'Contacts[]”。Type'undefined'不可分配给Type'Contacts[]”。此错误出现在let Contacts value:Array=Contacts&&Object.values（Contacts）；。Hello@rubendamatos1985，如果我尝试您的解决方案，侧边栏将不再抛出错误，但主组件仍然会抛出错误，因为它没有获取contacts属性。错误：TS2741:类型{user:object | undefined；activeUserId:string | null | undefined；}中缺少属性“contacts”，但在类型“ApplicationState”中是必需的。您好@MuhammadUmarFarooq，您的第一个解决方案使我不能再对props对象使用解构，并使我们不得不使用许多变通方法或更多语法。第二个解决方案是部分修复，它修复了侧边栏组件内部的问题，但没有修复主组件。好吧，你说的一些事情在正确的地方引起了我的注意，即初始化，这是问题的很大一部分，但不仅如此，还有接口类型。答案是：1。ApplicationState中的所有接口类型都必须是可选的，因为它们不是所有组件中都需要的，我仍然不明白为什么所有组件中都需要它们，仅仅因为它们用于映射父组件道具，但它似乎就是这样工作的。让contactsValues:Array | undefined=contacts&&Object.values（contacts）-这似乎是初始化变量的正确方法，为什么？我认为这是因为该变量中的值是使用可选的道具创建的，因此可能不会传递给组件！桑斯说得对吗？如果联系？是可选的，它可能最终在侧边栏中未定义，因此Contacts值应具有这两种类型。我认为你的答案是正确的，因为你的答案帮助我找出了问题所在。谢谢你，快乐编码！