react+Typescript利用useState定义两层(多层)数组对象并进行赋值,以及如何在组件中map循环取数据渲染?

前言

在实际应用中,很多时候组件时嵌套关系,而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>
            
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

定位算法工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值