React开发Todo List删除项目时首个元素也被移除是什么原因

• filter回调返回值错误
  Array.prototype.filter的回调需要返回布尔值判断元素是否保留。你的代码中写的是if(index!==Number(event.target.id)){ return index; }，当index为0时，返回的0会被隐式转换为布尔值false，导致第一项无论是否匹配删除条件都会被过滤，这是第一个元素跟着被删除的核心原因。
• 列表渲染和id赋值逻辑不规范
  你自己维护了全局变量key递增作为按钮id，还在onClick回调中写了key=0的重置逻辑，同时React列表渲染没有给<li>设置唯一key属性，会导致DOM diff异常，出现渲染错乱。

const App1 = () => {
    const [item, updatedItem] = useState('');
    const [Items, setItems] = useState([]);
    function inputEvent(event) {
        updatedItem(event.target.value);
    }
    const addItem = (event) => {
        event.preventDefault();
        setItems((prev) => {
            return [
                ...prev,
                item
            ]
        });
        updatedItem('');    
    }
    
    return (<>
    <div className='back'>
        <div className='list'>
            <header>ToDo List</header>
                <form onSubmit={addItem}>
                    <input type='text' placeholder='Add an item' value={item} onChange={inputEvent}/>
                    <button type='submit'>+</button>
                </form>
                    <div className='items'>
                        <ol> 
                            {Items.map((val, index) => <li key={index}>
                                <button onClick={() => {
                                    setItems((prevItems) => {
                                        return prevItems.filter((_, i) => i !== index);
                                    });
                                }}>x</button>
                                {val}
                            </li>)}
                        </ol>
                    </div>    
            </div>
        </div>
    </>);
}

• 直接用map的第二个参数index作为删除的匹配依据，不需要额外维护变量生成id，也避免了id错乱问题
• filter回调直接返回布尔判断i !== index，符合filter的使用规则
• 给<li>添加了必填的key属性，避免React渲染异常
• 删除了冗余的key变量和重置逻辑

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