React中filter函数在删除功能中触发循环问题求助

1. 点击删除触发循环渲染的核心原因 #

你在删除按钮的onClick中直接执行了deleteFromList(x)，这会导致组件每次渲染时都会主动调用这个函数，而函数内更新state又会触发重新渲染，形成无限循环。正确的做法是传递回调函数，而非直接执行：

错误写法：

<button className="setup-jobs-delete-button" onClick={deleteFromList(x)}>Delete</button>

修正写法：

<button className="setup-jobs-delete-button" onClick={() => deleteFromList(x)}>Delete</button>

2. Filter函数未实现精准删除逻辑 #

当前的filter(item => item)仅会过滤数组中的假值（空字符串、null等），并没有针对用户点击的项做删除。需要修改filter逻辑，根据传入的待删除项过滤数组：

修正后的删除函数：

const deleteFromList = (itemToDelete) => {
    console.log("Delete button pressed", itemToDelete);
    const { fullListState, setFullListState } = props;
    // 过滤掉当前要删除的项
    const filteredArray = fullListState.filter(item => item !== itemToDelete);
    setFullListState(filteredArray);
}

注意：如果列表存在重复项，此逻辑会删除所有相同内容的项。若需仅删除当前点击的项，建议在添加时为每个列表项生成唯一ID（如uuid），后续根据ID进行过滤。

3. 数组为空的判断逻辑错误 #

props.fullListState === []永远不会返回true——数组是引用类型，即使内容为空，它的引用地址也和空数组字面量不同。应该通过length属性判断：

错误写法：

{ props.fullListState === [] ? null : props.fullListState.map(x => { ... }) }

修正写法：

{ props.fullListState.length > 0 && props.fullListState.map((x, index) => { ... }) }

4. Key属性设置错误 #

当前key={props.fullListState[x]}是错误的，x是数组元素而非索引。若元素本身唯一，可直接用key={x}；若存在重复元素，临时可用索引（不推荐长期使用）或唯一ID作为key：

修正后的map渲染部分：

props.fullListState.map((x, index) => {
    return <div className="setup-jobs-input-container" key={x || index}>
        <p className="setup-jobs-input-paragraph">{x}</p>
        <button className="setup-jobs-delete-button" onClick={() => deleteFromList(x)}>Delete</button>
    </div>
})

完整修正后的组件return代码 #

<>
    <label className="setup-jobs-label">{props.label}</label>
    <div className="setup-jobs-input-container">
        <input className="setup-jobs-alt-input" type="text" onChange={onChange} value={props.currentListState} />
        <button className="setup-jobs-add-button" onClick={addToList}>Add</button>
    </div>
    { props.fullListState.length > 0 && props.fullListState.map((x, index) => {
        return <div className="setup-jobs-input-container" key={x || index}>
            <p className="setup-jobs-input-paragraph">{x}</p>
            <button className="setup-jobs-delete-button" onClick={() => deleteFromList(x)}>Delete</button>
        </div>
    }) }
</>

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