将嵌套对象作为道具映射到自定义组件

Posted 2023-02-22

【中文标题】将嵌套对象作为道具映射到自定义组件

【英文标题】：mapping nested object as props to custom component

【发布时间】：2021-09-12 06:27:02

【问题描述】：

我有一个应用程序，用户将在其中搜索一个词，他们将看到呈现的结果。在这种情况下，结果来自嵌套的 JSON 对象。我有一个名为CompanyInfoList 的组件，它将props 传递给呈现JSX 的Results 组件。道具是employee、date、tax和balance。我试图在组件中的地图内进行映射，但它不起作用。我的目标是访问详细信息数据，我该怎么做。要查看的文件是 CompanyInfoList 和 Results。数据通过 CompListContext

中的 axios 加载

在CompSearch comp 中，当您输入“ABC”时，什么都不会发生，因为我没有从 JSON obj 访问详细数据。这就是我需要帮助的地方。

这是 mongo DB JSON 对象（从 PostMan 粘贴）：

"data": 
        "details": 
            "employee": "person1",
            "date": "test date",
            "tax": "test tax",
            "balance": "22"
        ,
        "company": "TEST-ABC",
        "_id": "60dba9fe7641a44d40364c1f",
        "__v": 0
    

Here is my code

【问题讨论】：

您的链接代码盒现在至少可以运行并执行任何操作了吗？

您是否有一些模拟响应数据要放入该沙箱中以便有 something 来呈现？ CompListProvider 组件中的company 数组是一个空数组。

查看您的代码，您使用results.data 调用setCompany，这意味着我在您之前的问题上错了。如果您已经使用results.data 深入到对象的一层，您只需使用details.employee 或details.date。顺便说一句，CompanyInfoList 中的filtered 不是 函数——它是CompSearch.js 中的company.filter 的结果

@jnpdx 这是我在 Results comp 中尝试 details.employee 时出现的错误：TypeError: Cannot read property 'employee' of undefined

codesandbox.io/s/rough-sea-hupq1?file=/src/TestThree/… BTW 我认为这就是 jnpdx 之前可能一直想说的，现在回头看看。

【参考方案1】：

给定company 数组对象形状：

  details: 
    employee: "person1",
    date: "test date",
    tax: "test tax",
    balance: "22"
  ,
  company: "TEST-ABC",
  _id: "60dba9fe7641a44d40364c1f",
  __v: 0

您正在通过元素的company 属性进行过滤，当将过滤结果映射到CompanyInfoList 时，您需要访问details 属性，即result.details.employee。

const CompanyInfoList = ( filtered ) => 
  const fltr = filtered.map((result) => (
    <Results
      key=result.details.id
      employee=result.details.employee
      date=result.details.date
      tax=result.details.tax
      balance=result.details.balance
    />
  ));
  return <>fltr</>;
;