我有一个名为阵列company保存多个对象叫details，我需要从数据中蒙戈DB，特别是，我要抓住company name和employee's names从company array，并在显示它们list。我的问题是如何在数组中钻取并渲染company和employee names。
目前在我的嵌套地图List component，当我做details.employee，我只能够得到的结果，person1从company ABC我所需要的所有结果person 1, 2, and 3来自展示company ABC和company EFG“
这是来自沙箱 的代码（注意只看 List.js）
import axios from "axios";
import { useEffect, useState } from "react";
const List = () => {
const [company, setCompany] = useState([
{
details: [
{
employee: "person2",
date: "test date",
tax: "test tax",
balance: "22"
},
{
employee: "person3",
date: "test date",
tax: "test tax",
balance: "22"
}
],
company: "TEST-ABC",
_id: "60dba9fe7641a44d40364c1f",
__v: 0
},
{
details: {
employee: "person1",
date: "test date",
tax: "test tax",
balance: "22"
},
company: "TEST-EFG",
_id: "60dba9fe7641a44d40364c1f",
__v: 0
}
]);
return (
<>
<h2>Customer List</h2>
{company.map((c, i) => (
<ul key={i}>
{c.company}
{company.map((d, i) => (
<li key={i}>{d.details.employee}</li>
))}
</ul>
))}
</>
);
};
export default List;
return (
<>
<h2>Customer List</h2>
{company.map((c, i) => (
<li key={i}>
{c.company}
{company.map((d, i) => (
<li key={i}>{d.details.employee}</li>
))}
</li>
))}
</>
);
};
export default List;
内循环需要在员工company身上，而不是再一次。
考虑将有状态变量设为复数以使其更易于理解。（由于您在映射时需要引用单个公司，因此不希望也命名整个公司数组company）
输入结构很奇怪，detail看起来要么是一个数组，要么是一个对象。（如果可能，将结构更改为一致，使其始终为数组。否则，每次渲染时都必须检查它是数组还是对象。）
现场演示：
const App = () => {
const [companies, setCompanies] = React.useState([
{
details: [
{
employee: "person2",
date: "test date",
tax: "test tax",
balance: "22"
},
{
employee: "person3",
date: "test date",
tax: "test tax",
balance: "22"
}
],
company: "TEST-ABC",
_id: "60dba9fe7641a44d40364c1f",
__v: 0
},
{
details: {
employee: "person1",
date: "test date",
tax: "test tax",
balance: "22"
},
company: "TEST-EFG",
_id: "60dba9fe7641a44d40364c1f",
__v: 0
}
]);
return (
<React.Fragment>
<h2>Customer List</h2>
{companies.map((company, i) => (
<ul key={i}>
{company.company}
{
Array.isArray(company.details)
? company.details.map((detail, j) => <li key={j}>{detail.employee}</li>)
: company.details.employee
}
</ul>
))}
</React.Fragment>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句