React对接API的应用列表删除功能失效，handleRemove函数异常问题排查

问题根因 #

• 事件绑定错误：当前删除按钮的onClick属性直接调用了handleRemove函数，会导致组件渲染阶段就自动执行删除逻辑，而非点击时触发。
• 状态操作不符合不可变原则：handleRemove中直接将原状态数组drinks赋值给groupd，属于引用赋值，不符合React状态更新的不可变要求。

修复方法 #

1. 修改删除按钮的事件绑定为箭头函数包裹，只有点击时才执行删除逻辑
2. 优化handleRemove逻辑，直接基于原数组过滤生成新数组（filter方法本身返回新数组，无需额外赋值引用）

完整修复后代码 #

import React, { useState, useEffect } from 'react' 
import axios from 'axios'

// API endPoint - Punk API
const API_URL = 'https://api.punkapi.com/v2/beers'

const List = () => {
    const [drinks, setDrinks] = useState([])
    const [searchTerm, setSearchTerm] = useState('')

    const fetchData = async () => {
        const { data } = await axios.get(API_URL)
        setDrinks(data)
    }

    useEffect(() => {
        fetchData()    
    }, [])

    const handleRemove = (id) => {
        const newList = drinks.filter(group => group.id !== id)
        setDrinks(newList)
    }

    return (
        <div>
            <div className="wrapper">
                <div className="search__main">
                    <input type='text' placeholder="search..." onChange={e => {setSearchTerm(e.target.value)}}/>
                </div>
            </div>
            <div className="wrapper">
                    <div className="search__box">
                        {drinks.filter((val) => {
                            if(searchTerm === ""){
                                return val
                            } else if(val.name.toLowerCase().includes(searchTerm.toLowerCase()) || val.description.toLowerCase().includes(searchTerm.toLowerCase())){
                                return val 
                            }
                        }).map((drink, key) => {
                            return(
                                <div key={key} className="search__mini__box">
                                    <div >
                                    <img src={drink.image_url} alt="drink" className="search__img"/>
                                    </div>
                                    <h4>{drink.name}</h4>
                                    <p>{drink.description}</p>
                                    {/* 这里修改为箭头函数包裹 */}
                                    <button type="button" onClick={() => handleRemove(drink.id)}>
                                        delete
                                    </button>
                                </div>
                            )
                        })}
                    </div>
            </div>
        </div>
    )
}

export default List

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