Estoy atascado en tener mi componente secundario: ChildButton llame a su componente principal: la función de ParentTable que contiene un "setState", para luego actualizar o actualizar la tabla en sí (en el padre).

Estoy pasando una función getData del padre al hijo a través de accesorios. En el botón, haga clic en el niño: llame a una función para; cierre un cuadro de diálogo, haga un PUT en un almacén de datos de API simulado, luego llame a la función getData . La función getData hace un GET desde la API y hace un setState en "apiData". El problema es que los datos no se actualizan en la tabla principal a pesar de que se llama a la función getData. ¿Los cambios de estado no provocan una recarga? Código a continuación:

ParentTable.jsx

 export default function ParentTable() { **const [apiData, setAPIData] = useState([]);** const getData = () => { axios.get(`https://blah.mockapi.io/fakeData`) .then((getData) => { **setAPIData**(getData.data); }) console.log('getData'); // fires on child button click } return ( <Table.. <Table.Body> {**apiData**.map((obj) => { <Table.Cell>bunch of data from the obj.. <Table.Cell><ChildButton **getData={getData}**</Table.Cell> ... />../>../> ) } export default ParentTable;

ChildButton.jsx

 const ChildButton = ({getData, ...}) => { function handleClose() { setOpen(false) axios.put(`https://blah.mockapi.io/fakeData/${id}`, { ... }) **getData()** } return ( <Button onClick={handleClose} ...> Update </Button> ) } export default ChildButton;

Para resumir, ¿por qué mi cambio de estado en el componente principal no actualiza los datos de la tabla?