React中filter函数失效求助：点击删除按钮后好友列表未更新

核心问题 #

1. 删除匹配逻辑错误：你在map循环里把循环的index传给了deleteCard函数，但过滤列表时，却拿这个index和数据项自身的x.id做对比。如果你的friends数组里的id不是从0开始的连续数字，或者之前有过增删操作，index和真实的x.id就完全对不上，自然过滤不掉目标项。
2. 使用index作为key的反模式：React依赖key来识别列表元素的唯一性，用循环的index当key，会在列表元素被删除时，导致React错误地复用旧组件，界面无法正确更新。

修复后的代码 #

export default function App() {
  const [friendsState, setFriendsState] = useState(friends);

  function deleteCard(friendId) {
    alert("Deleting");
    // 用数据自身的唯一id精准过滤
    const newFriends = friendsState.filter((friend) => friend.id !== friendId);
    setFriendsState(newFriends);
  }
  
  return (
    <>
      {friendsState.map((friend) => (
        <Card
          name={friend.name}
          home={friend.home}
          id={friend.id}
          // 传递数据自身的id，而非循环index
          deleteCard={() => deleteCard(friend.id)}
          // 使用数据的唯一id作为key，确保React正确识别元素
          key={friend.id}
        />
      ))}
    </>
  );
}

关键注意点 #

• 永远用数据中唯一且稳定的标识（比如业务id）作为列表组件的key，别用循环的index
• 删除/修改列表项时，基于数据自身的唯一标识来操作，避免依赖循环索引这种不稳定的值

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