点击React组件时无法添加/移除Props至数组？问题排查求助

核心问题分析 #

你的代码存在三个关键问题：

1. 自定义Card组件未正确转发onClick事件，导致点击操作无法触发addName函数
2. 移除元素时仅调用filter但未通过setNames更新状态，数组不会发生变化
3. 状态更新未使用函数式写法，可能因React异步更新特性导致状态判断错误

1. 修复Card组件的事件传递 #

自定义组件不会自动将onClick绑定到内部元素，需要手动把事件绑定到Card的根容器：

// Card.tsx
import React from 'react';

type CardProps = {
  name: string;
  onClick: () => void;
};

const Card = ({ name, onClick }: CardProps) => {
  // 将onClick绑定到根div，确保点击Card区域能触发事件
  return (
    <div 
      onClick={onClick} 
      style={{ padding: '12px', border: '1px solid #eee', borderRadius: '4px', margin: '8px', cursor: 'pointer' }}
    >
      {name}
    </div>
  );
};

export default Card;

2. 修正App组件的状态更新逻辑 #

修改addName函数，使用函数式状态更新确保拿到最新状态，同时正确处理添加/移除逻辑：

// App.tsx
import React, { useState } from 'react';
import Card from "./Card";
import people from "../../data/people";

function App() {
  // 直接初始化空数组，无需外部变量
  const [peopleArr, setNames] = useState<string[]>([]);

  function addName(name: string) {
    // 用函数式更新，依赖最新的prevArr状态
    setNames(prevArr => {
      if (name && !prevArr.includes(name)) {
        // 添加：展开原数组并追加新name
        return [...prevArr, name];
      } else {
        // 移除：过滤掉目标name，返回新数组
        return prevArr.filter(el => el !== name);
      }
    });
  }

  return (
    <div style={{ padding: '20px' }}>
      {people.map((person) => (
        <Card 
          key={person.id} 
          name={person.name} 
          onClick={() => addName(person.name)} 
        />
      ))}
      {/* 新增：展示当前选中的名称，方便调试验证 */}
      <div style={{ marginTop: '20px' }}>
        已选中人员：{peopleArr.length > 0 ? peopleArr.join(', ') : '无'}
      </div>
    </div>
  );
}

export default App;

额外说明 #

• 若之前尝试将逻辑移到Card组件内部导致只能保存一个名称，是因为每个Card组件维护了独立的局部状态，无法共享。正确的做法是将状态提升到父组件App统一管理，子组件仅负责触发事件。
• 函数式状态更新(setNames(prevArr => ...))是React中依赖前一次状态更新的标准写法，能避免异步更新导致的状态不一致问题。

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