list列表中react组件数据更新 触发了所有list数据变化而不是对应项的数据变化

Question

有如下结构

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

大概是这样一个结构就是为每次点击li时请求数据 展示对应下标的li里的DetailComponent 详情 当我同时show多个时为啥所有的li的详情数据都会被变成我最后一次打开的详情数据 DetailComponent 里也是循环渲染dom结构的

Answer 1

因为你的DetailComponent的data来自state。点击li，state会发生变化，同时会对应用state的组件同步统一re-render。

你希望每次点击不一样可以在state中新建一个数组。然后通过map li去实现。
像这样：

arr.map((item, index)=>{
    <li>item.date</li>
})

Answer 2

需要在state中记录一下当前单击的item.id。

this.state = {selectedId: ''};

当li中的item.id与selectedId相同的时候就执行展开就好了。

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 序号)
    )
})