Estoy tratando de pasar una matriz de objetos (enumeraciones) de un componente hijo al padre. Pero no estoy entendiendo el truco.
Componente Padre:
const [openDialog, setOpenDialog] = useState(false); const handleReturn = () => filtros; const [filtros, setFiltros] = useState<Filtros[]>([]); useEffect(() => { setFiltros(handleReturn); console.log(filtros); }, [openDialog]); <FiltrosDialog openDialog={openDialog} handleCloseDialog={() => setOpenDialog(false)} filtrosSelec={filtros} />Son Component (aquí hay mucho código, pero confía en mí, el estado está devolviendo una matriz de filtros):
interface Props { openDialog: boolean; handleCloseDialog: () => void; filtrosSelec: Filtros[]; } 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, })=> { 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); ...}Básicamente, no estoy seguro de si se supone que mis accesorios de Filtros[] son una función o una matriz en sí misma...
Sus estados están bien, pero aquí está la lógica para la comunicación entre padres e hijos en términos de pedirle al niño que cambie la propiedad de los padres.
cont Parent = () => { const [count, setCount] = useState(0) return <Child count={count} change={setCount} /> } Puede ver que se pasa setCount , no count . Un niño solo puede cambiar la propiedad principal a través de un método. Porque en términos de establecer la propiedad, count = 3 no lo logrará debido a que count es un valor primitivo.
Esto suele ser bastante claro cuando crea un componente de entrada, como el siguiente.
<Input value={value} onChange={onChange} />Acabo de descubrir cómo hacerlo. Necesito pasar setState como la función dentro del apoyo secundario en el componente principal. Y el accesorio secundario debe ser un vacío y su argumento es el Array real:
Padre:
const [filtros, setFiltros] = useState<Filtros[]>([]); ... <FiltrosDialog openDialog={openDialog} handleCloseDialog={() => setOpenDialog(false)} filtrosSelec={setFiltros} />Niño:
interface Props { openDialog: boolean; handleCloseDialog: () => void; filtrosSelec: (arg: Filtros[]) => void; } const FiltrosDialog: React.FunctionComponent<Props> = ({ openDialog, handleCloseDialog, filtrosSelec, }) => { const [right, setRight] = useState<Filtros[]>([]); useEffect(() => filtrosSelec(right)); ...