React中如何从子组件向父组件传递Enum[]枚举数组

问题排查 #

• 数据流单向：现有实现仅支持父组件向子组件传值，没有子组件回传数据的回调通道，子组件内部修改的选中数组无法同步到父组件
• 父组件逻辑冗余：原有useEffect+handleReturn逻辑无实际作用，handleReturn返回当前的filtros值，相当于给setFiltros传入当前状态，不会触发状态更新，且setFiltros是异步操作，紧随其后的console.log也无法拿到最新值
• 父子状态脱节：子组件仅用filtrosSelec初始化了本地right状态，后续父组件修改filtros时子组件不会同步更新，子组件修改right时也不会通知父组件

方案说明 #

你提到的两种prop类型都需要：

• 父→子传当前选中值：prop类型为Filtros[]，用来把父组件维护的选中数组同步给子组件
• 子→父传更新后的值：prop类型为(newFiltros: Filtros[]) => void，是父组件传给子组件的回调函数，子组件修改选中数组后调用该函数把新值回传给父组件

修正后代码 #

父组件 #

const [openDialog, setOpenDialog] = useState(false);
// 父组件统一维护选中的筛选项
const [filtros, setFiltros] = useState<Filtros[]>([]);

// 监听filtros变化打印结果
useEffect(() => {
  console.log(filtros);
}, [filtros]);

<FiltrosDialog
  openDialog={openDialog}
  handleCloseDialog={() => setOpenDialog(false)}
  filtrosSelec={filtros}
  // 新增回调prop，接收子组件回传的新选中数组
  onFiltrosChange={(newFiltros) => setFiltros(newFiltros)}
/>

子组件 #

首先更新Props类型定义：

interface Props {
  openDialog: boolean;
  handleCloseDialog: () => void;
  filtrosSelec: Filtros[];
  // 新增回调prop类型
  onFiltrosChange: (newFiltros: Filtros[]) => void;
}

export enum Filtros {
  Ligacoes = "Ligações",
  Tempo = "Tempo em chamada (min)",
  Email = "E-mails enviados",
  Reuniao = "Reuniões agendadas",
}

然后在组件内部新增同步逻辑和回传触发逻辑：

const FiltrosDialog: React.FunctionComponent<Props> = ({
  openDialog,
  handleCloseDialog,
  filtrosSelec,
  onFiltrosChange
})=> {

  const [checked, setChecked] = useState<Filtros[]>([]);
  const [left, setLeft] = useState<Filtros[]>([
    Filtros.Reuniao,
    Filtros.Tempo,
    Filtros.Email,
    Filtros.Ligacoes,
  ]);
  const [right, setRight] = useState<Filtros[]>(filtrosSelec);
  const leftChecked = intersecao(checked, left);
  const rightChecked = intersecao(checked, right);

  // 新增：父组件选中值变化时同步到子组件本地状态
  useEffect(() => {
    setRight(filtrosSelec);
  }, [filtrosSelec]);

  // 示例：在确认按钮点击时回传最新选中值给父组件
  const handleConfirm = () => {
    onFiltrosChange(right);
    handleCloseDialog();
  }

  // 剩余原有逻辑...
}

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