react简单循环和修改数据优雅的方式

数据源

const goodsText = [
    {
        text: '商品描述',
        show: false,
        title: '',
        msg: '着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊'
    },
    {
        text: '订单与配送',
        show: true,
        title: '',
        msg: '我们的目标是确保您尽快收到订单。成功提交订单后，仓库将立即处理您的订单。然后挑选，包装和发送。一旦快件发出，您将通过微信收到跟踪信息以及预计交货日期的信息。您应该在2-4个工作日之后收到订单。订单不在周末和当地公众假期运输(除中国地区外) 。请注意，预计交货时间(2- 4个工作日)是预计时间，可能因Petit Projects以外的外部因素而有所不同。这些因素可能包括但不限于极端天气条件，技术故障，海关延误等。此外， 请注意，在促销活动期间，交付时间可能比平时更长。运费取决于运费选项，包裹和目的地国家的重量，在您完成订单之前，结账时会清楚地显示实际运费',
        title: '当日配送服务'
    },
    {text: '退货需知', show: true, title: '', msg: '退货需知退货需知退货需知退货需知退货需知退货需知退货需知退货需知退货需知退货需知'}
]

constructor 函数

constructor(props) {
        super(props)
        this.state = {
            goodsMsg: goodsText
        }
    }

render函数里面的循环和判断显示隐藏

<div className="goods_info">
        {
             this.state.goodsMsg.map((v, i) => (
                 <div key={i}>
                            <div onClick={this.changeMenu.bind(this, i)} className='goods_b'>
                                  <span className='title'>{v.text}</span>
                                  <Icon type={v.show ? 'down' : 'up'}/>
                                </div>
                                <div style={v.show ? {display: 'none'} : {display: 'block'}} className='goods_text'>
                                    {v.title ? <p className='title1'>{v.title}</p> : ''}
                                    <span>{v.msg}</span>
                                </div>
                            </div>
                        ))
                    }
          </div>

点击changeMenu函数修改数值优雅的方式

changeMenu(menuIndex) {
        let goodsInfo = this.state.goodsMsg // 给对象赋值出来
        goodsInfo[menuIndex].show = !goodsInfo[menuIndex].show // 在新对象里面修改，然后赋值给需要改变的对象
        this.setState({
            goodsMsg: goodsInfo
        })
    }