ReactJS动态元素移除问题：点击删除无响应，疑为this指向异常

嘿，我瞅了下你的代码，问题其实出在两个关键地方，咱们一步步来捋：

1. 回调函数传递错误 #

你在renderItems里给Tiles组件传delete属性的时候，箭头函数只是返回了this.removeItemCity方法，但并没有调用它，也没把索引i传进去。这样点击按钮的时候，相当于啥都没执行，自然没反应。

修正后的renderItems应该是这样：

renderItems(item, i){ 
  return(
    <Tiles 
      key={'key_' + i} 
      index={i} 
      delete={() => this.removeItemCity(i)} // 直接调用方法并传入索引
    />
  ); 
}

2. 直接修改State数组（违反不可变性原则） #

你直接对this.state.items做splice修改，这会直接改动原state里的数组，而React依赖state的不可变性来检测变化、触发重新渲染。这种操作可能导致组件不更新，或者出现奇怪的bug。

正确的做法是先创建原数组的副本，再修改副本，最后更新state：

removeItemCity(i){ 
  // 用扩展运算符创建数组副本，避免修改原state
  let arr = [...this.state.items]; 
  arr.splice(i, 1); 
  this.setState({items: arr}) 
}

额外检查 #

还要确认你的Tiles组件里，正确接收了delete这个props，并且在点击删除按钮（X）的时候调用了它。比如Tiles组件里的按钮应该是类似这样：

// 假设Tiles是函数组件
const Tiles = ({ delete: handleDelete }) => {
  return (
    <div>
      {/* 其他内容 */}
      <button onClick={handleDelete}>X</button>
    </div>
  );
}

这样调整之后，点击删除按钮应该就能正常移除对应的元素啦～

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