React.js中点击删除按钮误删除根组件（Header1）问题排查求助

嘿，我帮你找出问题所在啦！你的删除功能触发后整个组件崩溃，主要是两个小bug导致的，咱们一步步解决：

问题分析 #

1. deleteItem函数未返回过滤后的新数组
   在deleteItem里，你调用了prevValue.filter()来筛选要保留的项，但没有把过滤后的新数组返回给setItems。这会导致setItems接收到undefined，进而让items状态变成undefined——后续渲染时items.map()就会抛出错误，直接让整个Header1组件崩溃。

2. 添加后重置input的方式错误
   addItem里的setInput("")把原本是对象类型的input状态改成了字符串。虽然添加功能暂时能用，但后续输入时，handleCheck函数尝试更新对象的属性就会出问题，也会给组件稳定性埋下隐患。

修改后的代码 #

Header1组件的修正部分 #

function Header1(){
 const [input,setInput]=useState({ title:"", content:"" })
 const [items,setItems]=useState([])
 function handleCheck(event){
 const {name,value}=event.target;
 setInput(prevValue=>{
 return { ...prevValue, [name]: value}
 })
 }
 function addItem(){
 setItems( prevValue=>{
 return [...prevValue,input]
 } )
 // 重置为初始的空对象，而非空字符串
 setInput({ title:"", content:"" })
 }
 function deleteItem(id){
 setItems(prevValue=>{
 // 必须返回filter生成的新数组
 return prevValue.filter((item,index)=>{
 return index!==id
 })
 })
 }
 return(<>
 <div className="h-1">
 <div className="i-1">
 <input onChange={handleCheck} name="title" placeholder="title" value={input.title}/>
 <input onChange={handleCheck} name="content" placeholder="description" value={input.content}/>
 <button onClick={addItem}>add</button>
 </div>
 </div>
 { items.map((item,index)=>{
 // 这里把参数名从value改成index更语义化，不影响功能但可读性更好
 return <Note key={index} id={index} title={item.title} des={item.content} del={deleteItem} />
 })}
 </>
 )
}
export default Header1;

Note组件无需修改 #

你的Note组件逻辑是没问题的，点击删除按钮时正确调用了父组件传过来的del方法并传递了id。

为什么这样改？ #

• 对于deleteItem：React的状态更新需要基于新值，filter会返回一个全新的数组（不会修改原数组），我们把这个新数组返回给setItems，就能正确更新状态，保留除了对应index之外的所有项。
• 对于addItem：把input重置为初始的空对象，保证后续输入框的value绑定始终是对象的属性，避免因类型不匹配导致的渲染错误。

内容的提问来源于stack exchange，提问作者Rajneesh Sajwan