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

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

有如下結構

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

大概是這樣一個結構就是為每次點擊li時請求數(shù)據(jù) 展示對應下標的li里的DetailComponent 詳情 當我同時show多個時為啥所有的li的詳情數(shù)據(jù)都會被變成我最后一次打開的詳情數(shù)據(jù) DetailComponent 里也是循環(huán)渲染dom結構的

回答
編輯回答
舊時光

因為你的DetailComponent的data來自state。點擊li，state會發(fā)生變化，同時會對應用state的組件同步統(tǒng)一re-render。

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

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

需要在state中記錄一下當前單擊的item.id。

this.state = {selectedId: ''};

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

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