我要评论前言
在实际应用中，很多时候组件时嵌套关系，而react中组件中取数据只能取一层，但要定义多个数组对象又显得比较麻烦，后端可能为此多写几个接口。因此，在搭好组件框架后，我们可以先定义好数据结构，多层包裹数组对象，这样后端按我们定义好的数据结构写一个接口即可。
1.多层数组对象如何定义
以两层为例，代码如下（示例）：
//内层（第一层）的类型
type jobinfo = {
jobtype: string;
jobstatus: string;
jobtime: number;
jobdate: string;
fieldname: string;
jobarea: number;
};
//内层的数据，这里直接写死了，当然也可以传值
const [jobrecord, setjobrecord] = usestate<jobinfo[]>([
{
jobtype: '旋耕',
jobstatus: '作业中',
jobtime: 10,
jobarea: 0,
jobdate: '9.07.15:00-9.10.19:00',
fieldname: '地块18-1'
},
{
jobtype: '深翻',
jobstatus: '已完成',
jobtime: 10,
jobarea: 10,
jobdate: '9.07.15:00-9.10.19:00',
fieldname: '地块18-1'
},
{
jobtype: '除草',
jobstatus: '已完成',
jobtime: 8,
jobarea: 10,
jobdate: '9.07.15:00-9.10.19:00',
fieldname: '地块18-1'
},
{
jobtype: '旋耕',
jobstatus: '作业中',
jobtime: 10,
jobarea: 0,
jobdate: '9.07.15:00-9.10.19:00',
fieldname: '地块18-1'
}
]);
//外层（第二层）的类型
type agriculturalrecord = {
agriculturalname: string;
agriculturaloil: number;
//此处类型为jobinfo[]
agriculturaljobinfo: jobinfo[];
};
//外层的数据，同样可以传值
const [agriculturalinforecord, setagriculturalinforecord] = usestate<agriculturalrecord[]>([
{
agriculturalname: '1号拖拉机',
agriculturaloil: 50,
//此处数据为第一层的jobrecord
agriculturaljobinfo: jobrecord
}
]);
如何传值，以第一层进行举例，三种方式，第三种后面补充再：
//假设feas为地图要素，其中包括这些属性数据，直接取
let jobrecordlist = [];
jobrecordlist.push({
//1、直接赋值
jobtype: '深翻',
jobstatus: '已完成',
jobtime: 10,
jobarea: 10,
jobdate: '9.07.15:00-9.10.19:00',
fieldname: '地块18-1'
//2、feas传值
jobtype: feas[0].values_.type,
jobstatus: feas[0].values_.status,
jobtime:feas[0].values_.time,
jobarea: number(feas[0].values_.area.tofixed(2)),
jobdate: feas[0].values_.date,
fieldname: feas[0].values_.name,
});
setjobrecord(jobrecordlist);
2.组件中的使用
代码如下（示例）：
<div classname="agricultural-info-div" ref={overlaycontainerref1}>
//外层循环遍历
{agriculturalinforecord.map((ele, index) => {
return (
<div key={index}>
<div classname="agricultural-info-lh">{ele.agriculturalname}</div>
<div classname="agricultural-info-top-righttitle">{ele.agriculturaloil}</div>
//内层循环遍历
<div classname="agricultural-info-mid-content">
{ele.agriculturaljobinfo.map((ele, index) => {
return (
<div key={index} classname="agricultural-info-mid-content1">
<div classname="agricultural-info-c1">{ele.jobtype}</div>
<div classname="agricultural-info-c2">{ele.fieldname}</div>
...
</div>
</div>
发表评论