The update of the react component data in the list list triggers all list data changes rather than the corresponding item data changes

has the following structure

that.state.list.map(function(item,index){
    return (
    
        <li>{}
        {this.state.show?
            <DetailComponent data={this.state.date}/>
        :null
        }
        </li> (index )
    )
})

probably such a structure is to request the data to show the DetailComponent details in the corresponding subscript li every time I click on li. When I show multiple li at the same time, why all the li detail data will be turned into the last detail data I opened. DetailComponent is also a loop rendering dom structure

Css html react.js javascript

Mar.05,2021

because the data of your DetailComponent comes from state. Clicking on li,state will change, and there will be a unified re-render for Synchronize, a component that applies state.

if you want each click to be different, you can create a new array in state. And then through map li to achieve.
like this:

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

you need to record the item.id you currently clicked in state.

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

Previous: Spring boot integrated fediz-cxf, interface report Service Object is null

Next: How to add Baidu Statistics Code in nuxt.js Project