在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ list列表中react組件數(shù)據(jù)更新 觸發(fā)了所有l(wèi)ist數(shù)據(jù)變化而不是對(duì)應(yīng)項(xiàng)的數(shù)

list列表中react組件數(shù)據(jù)更新 觸發(fā)了所有l(wèi)ist數(shù)據(jù)變化而不是對(duì)應(yīng)項(xiàng)的數(shù)據(jù)變化

有如下結(jié)構(gòu)

that.state.list.map(function(item,index){
    return (
    
        <li>{點(diǎn)我查看詳情}
        {this.state.show?
            <DetailComponent data={this.state.date}/>
        :null
        }
        </li> (index 序號(hào))
    )
})

大概是這樣一個(gè)結(jié)構(gòu)就是為每次點(diǎn)擊li時(shí)請(qǐng)求數(shù)據(jù) 展示對(duì)應(yīng)下標(biāo)的li里的DetailComponent 詳情 當(dāng)我同時(shí)show多個(gè)時(shí)為啥所有的li的詳情數(shù)據(jù)都會(huì)被變成我最后一次打開的詳情數(shù)據(jù) DetailComponent 里也是循環(huán)渲染dom結(jié)構(gòu)的

回答
編輯回答
舊時(shí)光

因?yàn)槟愕腄etailComponent的data來自state。點(diǎn)擊li，state會(huì)發(fā)生變化，同時(shí)會(huì)對(duì)應(yīng)用state的組件同步統(tǒng)一re-render。

你希望每次點(diǎn)擊不一樣可以在state中新建一個(gè)數(shù)組。然后通過map li去實(shí)現(xiàn)。
像這樣：

arr.map((item, index)=>{
    <li>item.date</li>
})
2018年8月25日 20:31
編輯回答
局外人

需要在state中記錄一下當(dāng)前單擊的item.id。

this.state = {selectedId: ''};

當(dāng)li中的item.id與selectedId相同的時(shí)候就執(zhí)行展開就好了。

that.state.list.map(function(item,index){
    return (
    
        <li onClick={() => this.setState({selectedId: item.id})}>{點(diǎn)我查看詳情}
        {this.state.selectedId === item.id?
            <DetailComponent data={this.state.date}/>
        :null
        }
        </li> (index 序號(hào))
    )
})
2017年2月20日 02:23