Javascript React-尝试删除子组件，但我传递的函数存在一些问题

我试图通过发送一个函数和一个id，然后调用该函数来删除一个子组件 单击子对象中的按钮时

注意：子组件是类组件，父组件是功能组件

以下是在父级中定义的函数：

 const removeTable = (tableId) => {
    const newArray = tables.filter((el) => (el.id !== tableId)
    );
    console.log(newArray);
    setTables(newArray)
}

这是删除元素，但不是我想要的元素。它不删除我传递的id为的元素，而是保留该数字，从0开始

因此，当我单击id为3的项目时，它只保留0-2。在这个例子中，它应该保持0-2和4-6。（数组应该有7个元素长，但不知何故它被缩短了（在过滤器之前））

我的尝试和发现：

我完全迷路了，所以我决定创建一个模拟函数而不使用子函数：

const removeTabletest = () => {
const key = 1; 
const testArr = [{id:1,op:"adsad"}, {id:2,op:"adsad"},{id:3,op:"adsad"} ];
const fml = testArr.filter( (el) => (el.id !== key));
console.log(fml)
}

这个函数正如我所期望的那样工作

最后，我无意中发现，当我在函数开头使用console.log（tables）时，得到的数据与React Dev工具中的数据不一样。tables数组不是我期望的完整数组

但是，当我创建另一个由父级（而不是子级）调用的按钮时，表被正确记录：

---

知道发生了什么吗？或者我怎样才能做到这一点呢？

这听起来像是一个很难用React实现的方法。通常，您要做的只是基于

道具
或
状态
在渲染方法中过滤
数组。如果您需要一个子元素来修改您的筛选依据，比如一个按钮，那么您将向该子元素传递一个回调。以下是一个例子：

class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hiddenItems: [] };
    }

    hideItem = item => {
        // to hide a row of the table we add it to the list
        // of hidden items.
        this.setState({ hiddenItems: [...this.state.hiddenItems, item] });
    }

    render() {
        // Create the table element by filtering out hidden items
        const table = this.props.items
              .filter(item => !this.state.hiddenItems.includes(item))
              .map(item => {
                  return (
                      <div key={item.id}>{item.contents}</div>
                  );
              });
        return (
            <>
              {table}
              // the onClick function could also be passed to a
              // child React object
              <button onClick={() => this.hideItem(this.props.item[0])}>
                Hide item 0
              </button>
            </>
        );
    }
}

当然，您也可以使用取消隐藏项的功能，但希望这显示了一般方法。
不理解，在第一张图像中，您单击按钮以删除id=3的elment，结果就是这样。日志中有id为0、1和2的元素。什么工作不正常？是的，但最初有7个元素。我想保持0-2和4-end。在过滤步骤之前，数组以某种方式被切割为4
[{ id: 0, contents: 'blah blah'},
 { id: 1, contents: (<span>blah</span>)}]