Tengo un padre y un hijo componente. Hay 3 accesorios que proporciona el padre, de los cuales 1 no se actualiza correctamente.

A continuación se muestra el componente principal. El accesorio en cuestión es selectedFilters (que es un objeto donde las claves se asignan a conjuntos ) y la función de actualización relevante es filterChanged (esto se pasa al niño)

 import filters from "../../data/filters"; //JSON data const Block = (props) => { const [selectedFilters, setSelectedFilters] = useState({versions: new Set(), languages: new Set()}); console.log(selectedFilters); const filterChanged = useCallback((filter_key, filter_id) => { setSelectedFilters((sf) => { const newSFSet = sf[filter_key]; //new Set(sf[filter_key]); if (newSFSet.has(filter_id)) { newSFSet.delete(filter_id); } else { newSFSet.add(filter_id); } const newSF = { ...sf, [filter_key]: new Set(newSFSet) }; return newSF; }); }, []); return ( <FilterGroup filters={filters} selectedFilters={selectedFilters} onFilterClick={filterChanged} ></FilterGroup> ); }; export default Block;

El siguiente es el componente secundario: (Tenga en cuenta que mientras el componente Filter ejecuta la función filterChanged, creo que es irrelevante para el error)

 import Filter from "./Filter/Filter"; const FilterGroup = (props) => { const { filters, selectedFilters, onFilterClick } = props; console.log(selectedFilters); const filter_view = ( <Container className={styles.container}> {Object.keys(filters).map((filter_key) => { const filter_obj = filters[filter_key]; return ( <Filter key={filter_obj.id} filter_key={filter_key} filter_obj={filter_obj} selectedFilterSet={selectedFilters[filter_key]} onFilterClick={onFilterClick} /> ); })} </Container> ); return filter_view; }; export default FilterGroup;

Al ejecutar la aplicación, encuentro que los filtros seleccionados se actualizan correctamente solo una vez. Después de eso, solo cambia temporalmente en el Block.tsx principal, pero finalmente vuelve al primer valor actualizado. Además, FilterGroup.tsx solo recibe la primera actualización. Después de eso, nunca recibe más valores actualizados.

Aquí están los registros:

Después de experimentar un poco, está claro que el problema se origina en la función filterChanged . Pero parece que no puedo entender por qué la segunda actualización es temporal Y no se transmite al niño.

¿Algunas ideas? Gracias por adelantado. (Si se requiere alguna otra información, por favor menciónela)