如何实现按钮删除数组项？React子组件删除功能失效排查

删除按钮不生效是3处代码逻辑错误导致的：

• 违反React单向数据流规则：list是父组件App维护的state，子组件List无权直接修改props传入的数组，必须通过父组件暴露的更新方法修改状态。
• 事件绑定写法错误：onClick={handleDelete(listItem.key)}会在组件渲染阶段立即执行handleDelete，而非点击按钮时触发，相当于绑定的是函数执行后的undefined返回值，点击自然无响应。
• 状态更新逻辑缺失：Array.filter是返回新数组的纯方法，原代码既没有接收filter的返回结果，也没有调用状态更新方法触发重渲染，就算逻辑执行页面也不会有变化。

1. 修改父组件App.js #

在父组件内定义删除逻辑，将删除方法通过props传递给子组件：

import { useState } from 'react';
import List from './List';

function App() {
  const [input, setInput] = useState("");
  const [list, setList] = useState([]);
  
  const handleSubmit = (e) => {
      e.preventDefault();
      setList([...list, {val: input, key: Date.now()}]); // 替换随机数为时间戳避免key重复
      setInput(""); // 提交后清空输入框，可选优化
  }

  const handleChange = (e) => {
       setInput(e.target.value)
  }

  // 新增删除方法：过滤掉目标key对应的项后更新state
  const handleDelete = (targetKey) => {
    setList(list.filter(item => item.key !== targetKey));
  }

  return(
    <div className='App'>
     <header className='App-header'>
       <div className='Wrapper'>
         <div className='input-container'>
         <input type="text" onChange={handleChange} value={input} />
         <input type="submit" onClick={handleSubmit} />
         </div>
       {/* 传入list数据和删除方法给子组件 */}
       <List list={list} onDelete={handleDelete}/>
       </div>
     </header>
    </div>
  )
}

export default App;

2. 修改子组件List.jsx #

删除子组件内无效的handleDelete逻辑，修正onClick绑定写法，调用父组件传入的删除方法：

function List(props) {
  return (
      <>
          {
              props.list.map(function(listItem){
                  return (
                      <div className='lists' key={listItem.key}>
                          <p>
                            {listItem.val}  
                            {/* 用箭头函数包裹逻辑，点击时才触发删除 */}
                            <button onClick={() => props.onDelete(listItem.key)}>Delete</button> 
                          </p>
                      </div>
                  )
              })
          }
      </>
  )
}

export default List

注意：原代码用Math.floor(Math.random() * 11)生成列表key，仅能生成0-10共11个值，添加超过11个列表项时必然出现key重复，会导致React渲染错位、状态异常，建议替换为时间戳、自增ID等全局唯一值。

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