React中跨组件传递useState的set函数以实现子组件删除列表项的问题

嘿，我来帮你搞定这个问题！你现在遇到的核心点是React的单向数据流规则：子组件不能直接修改父组件的状态，得通过父组件传递过来的函数来触发状态更新。下面我一步步给你讲怎么改：

步骤1：在父组件里封装删除逻辑 #

首先在index.js的Items组件里，写一个专门处理删除的函数，用filter过滤掉要删除的项，然后调用setItems更新状态。这里推荐用函数式更新（给setItems传一个以旧状态为参数的函数），这样能确保我们总是基于最新的状态来修改：

import React,{useState} from 'react'
import {List} from './list'
import ItemList from './ItemList'
function Items(){
 const [items,setItems] = React.useState(List);

 // 新增的删除函数
 const handleRemoveItem = (idToRemove) => {
   setItems(prevItems => prevItems.filter(item => item.id !== idToRemove));
 }

 return (
 <>
 <h1>{items.length} Items in total</h1>
 {items.map((itemArr)=>{
   // 把删除函数作为props传给ItemList
   return <ItemList {...itemArr} onRemove={handleRemoveItem}/>
 })}
 </>
 )
}
ReactDom.render(<Items />,document.getElementById('root') )

步骤2：子组件接收并调用删除函数 #

接下来修改ItemList.js，接收父组件传过来的onRemove函数，然后在按钮点击时调用它，把当前项的id传过去就行：

import React from 'react'
function ItemList(props) {
 const {id, obj, onRemove} = props;

 // 也可以直接把onClick写成() => onRemove(id)，省掉这个函数
 const removeItem = () => {
   onRemove(id);
 }

 return (
 <div>
 <h3>{id}</h3>
 <h4>{obj}</h4>
 <button onClick={removeItem}>Remove</button>
 </div>
 )
}
export default ItemList

为什么要这么做？ #

React的单向数据流让组件的状态变化更可追踪：父组件掌管状态和更新逻辑，子组件只负责渲染UI和触发用户交互。这样你的代码会更清晰，以后维护或者扩展功能也更方便。

现在点击按钮应该就能正常删除对应的列表项啦！

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