React State数组更新异常：useCallback引发列表删除逻辑错误求助

更新：可查看在线示例调试

我开发了一个展示列表的页面，希望点击删除按钮时按ID删除对应列表项。

代码如下：

import { useState, memo, useCallback } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

const initialData = {
  data: [
    {
      id: '1',
      name: 'A',
    },
    {
      id: '2',
      name: 'B',
    },
    {
      id: '3',
      name: 'C',
    },
  ],
};


type Props = {
  id: string,
  name: string,
  onClicked: (id: string) => void;
};

const MyView = (props: Props) => {
  const { onClicked, name, id} = props;

  const onPressDelete = useCallback(() => {
    onClicked(id);
  }, [name]);

  return (
    <TouchableOpacity onPress={onPressDelete}>
      <Text style={{ fontSize: 28, backgroundColor: 'yellow', marginVertical: 10 }}>{name}</Text>
    </TouchableOpacity>
  ) ;
}

export default function App() {
  const [pageData, setPageData] = useState(initialData);

  const deleteById = (idToDelete: string) => {
    const currentList = [...pageData.data];
    console.log('current list size == ' + currentList.length);
    const newList = currentList.filter(
      (filteredItem: any) => filteredItem.id !== idToDelete
    );
    console.log('new list size == ' + newList.length);
    setPageData({
      ...pageData,
      data: newList,
    });
  };

  return (
    <View style={styles.container}>
      {pageData.data.map((item, index) => (
        <MyView id={item.id} name={item.name} onClicked={deleteById} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

原以为setPageData函数工作异常。

操作场景如下：

1. 初始页面有3个项：A / B / C
2. 删除C后，页面显示A和B，此为正确结果
3. 删除B后，页面显示A，结果仍正确
4. 但最后删除A时，页面却重新出现B和C。

最后一次操作时，日志显示current list size == 3，原本预期最终列表为空，无法理解为何原始数据被保留。

重新检查代码后，发现错误源于以下部分：

const onPressDelete = useCallback(() => {
  onClicked(id);
}, [name]);

如果修改为：

const onPressDelete = () => {
  onClicked(id);
};

则所有操作恢复正常。

我想了解为何这部分代码会影响列表的更新结果。

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