react setState修改嵌套对象

 

在react使用setState过程中,难免会遇到复杂的数据类型,,这里还要提醒一下setState 是异步操作行为,需要setState之后的结果做为参数,请求数据的话,可以配合 async  await 使用

例如: 我们要修改下面的page 而不动limit 

request:{
          data:{
                limit: 50, 
                page: 1
          }
       }

这时我们将使用es6的语法来进行处理

this.setState({
            request:{
                data:{
                    ...this.state.request.data,
                    page:2222
                }
            }
        })

得到的结果

request:{
          data:{
                limit: 50, 
                page: 2222
          }
       }

可参考链接

转载于:https://www.cnblogs.com/Dobin/p/10402266.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的实现示例: ```jsx import React from "react"; import { Table } from "antd"; const columns1 = [ { title: "姓名", dataIndex: "name", key: "name" }, { title: "年龄", dataIndex: "age", key: "age" }, { title: "住址", dataIndex: "address", key: "address" } ]; const columns2 = [ { title: "学科", dataIndex: "subject", key: "subject" }, { title: "分数", dataIndex: "score", key: "score" } ]; const columns3 = [ { title: "项目", dataIndex: "project", key: "project" }, { title: "进度", dataIndex: "progress", key: "progress" } ]; const data1 = [ { key: "1", name: "张三", age: 18, address: "北京市朝阳区" }, { key: "2", name: "李四", age: 20, address: "上海市浦东新区" } ]; const data2 = [ { key: "1", subject: "数学", score: 90 }, { key: "2", subject: "语文", score: 95 } ]; const data3 = [ { key: "1", project: "设计", progress: "80%" }, { key: "2", project: "开发", progress: "60%" } ]; class NestedTable extends React.Component { constructor(props) { super(props); this.state = { expandedRowKeys: [] }; } onExpand = (expanded, record) => { const { expandedRowKeys } = this.state; if (expanded) { this.setState({ expandedRowKeys: [...expandedRowKeys, record.key] }); } else { this.setState({ expandedRowKeys: expandedRowKeys.filter(key => key !== record.key) }); } }; render() { const { expandedRowKeys } = this.state; const expandedRowRender1 = record => ( <Table columns={columns2} dataSource={data2} pagination={false} size="small" showHeader={false} /> ); const expandedRowRender2 = record => ( <Table columns={columns3} dataSource={data3} pagination={false} size="small" showHeader={false} /> ); return ( <Table columns={columns1} dataSource={data1} pagination={false} size="small" expandedRowRender={expandedRowRender1} expandedRowKeys={expandedRowKeys} onExpand={this.onExpand} rowKey="key" > <Table columns={columns2} dataSource={data2} pagination={false} size="small" showHeader={false} /> <Table columns={columns3} dataSource={data3} pagination={false} size="small" showHeader={false} /> </Table> ); } } export default NestedTable; ``` 这个示例,我们使用了三个表格分别表示三个不同的数据源,然后将它们嵌套在了一个表格,通过 `expandedRowRender` 属性指定了第一个表格展开时应该渲染的内容,同时也提供了可以展开和收起的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值