delete Item

Question

当createItem点击多次后生成了一样id的item，照理说delete其中一个相同的都会消失。但如图并没有，outcome 总和倒是更新了。切换一下chartview再换回来listview就好了。这是为什么啊？

Answer 1

三生若空白 2020-03-07 17:46:04

我也出现了这个问题。我觉得应该是PriceList中添加的key的问题，如果使用了key={item.id}这样的写法，在这种情况下就会出现两个或多个列表项有相同key的情况，这个时候React的渲染就会出现异常，虽然要被删除的项实际上已经从items中删除了，但是无法正确显示。虽然我对React渲染中key的理解还比较模糊，但是我觉得应该是这个原因，并且我通过修改PriceList的代码将key={item.id}更改为了key={index}，成功解决了你说的问题。

Answer 2

张轩 2020-02-19 11:39:54

同学 提供一下你删除时候的代码看看 代码最好详细一点哈

• 提问者 慕姐658251 #1

  changeDate = (year,month)=>{
  		this.setState({
  			currentDate:{year,month}
  		})
  	}
  	modifyItem = (modifiedItem)=>{
  		const modifiedItems = this.state.items.map(item=>{
  			if(item.id===modifiedItem.id){
  				return 	{...item,title:"new title"}
  			}else{
  				return item
  			}
  		})
  		this.setState({
  			items:modifiedItems
  		})
  	}
  	createItem = ()=>{
  		this.setState({
  			items:[newItem,...this.state.items]
  		})
  	}
  	deleteItem =(deletedItem)=>{
  		const filteredItems = this.state.items.filter(item=>item.id!=deletedItem.id)
  		this.setState({
  			items:filteredItems
  		})
  	}

• 提问者 慕姐658251 #2

  class MonthPicker extends React.Component {
  	constructor(props){
  		super(props)
  		this.state = {
  			isOpen: false
  		}
  	}
  	toggleDropdown = (event)=>{
  		event.preventDefault()
  		this.setState({
  			isOpen: !this.state.isOpen,
  			selectedYear:this.props.year
  		})
  	}
  	selectYear = (event,yearNumber)=>{
  		event.preventDefault()
  		this.setState({
  			selectedYear: yearNumber
  		})
  	}
  	selectMonth = (event,monthNumber)=>{
  		event.preventDefault()
  		this.setState({
  			isOpen:false
  		})
  		this.props.onChange(this.props.selectedYear,monthNumber)
  	}
  	render(){
  		const {year,month} = this.props
  		const {selectedYear} = this.state
  		const {selectedMonth} = this.state 
  		const {isOpen} = this.state
  		const monthRange = range(12,1)
  		const yearRange = range(9,-4).map(number=>number+year)

• 提问者 慕姐658251 #3

  return (
  			<div className="dropdown month-picker-component">
  				<h4>Select month</h4>
  				<button 
  					className="btn btn-lg btn-secondary dropdown-toggle"
  					onClick={this.toggleDropdown}	
  				>
  					{`${year}.${padLeft(month)}`}
  				</button>
  				{ isOpen && 
  					<div className="dropdown-menu" style={{display:"block"}}>
  						<div className="row">
  							<div className="col border-right">
  								{yearRange.map((yearNumber,index)=>
  									<a 
  										key = {index} 
  										href="#"
  										onClick={(event)=>{this.selectYear(event,yearNumber)}}
  										className={(yearNumber===selectedYear)?'dropdown-item active':'dropdown-item'}
  									>
  										{yearNumber}
  									</a>
  								)}
  							</div>
  							<div className="col">
  								{monthRange.map((monthNumber,index)=>
  									<a 
  										key = {index} 
  										className='dropdown-item'
  										href="#"
  										onClick={(event)=>{this.selectMonth(event,monthNumber)}}
  										className={(monthNumber===selectedMonth)?'dropdown-item active':'dropdown-item'}
  									>
  										{padLeft(monthNumber)}
  									</a>
  								)}
  							</div>
  						</div>
  					</div>
  				}
  			</div>
  		)
  	}

点开查看后面3条评论