En mi aplicación de reacción, tengo un objeto dinámico llamado statusFilters que contiene múltiples variables. Quería que este valor de estado de objeto estuviera vacío cuando hiciera clic en un botón. Aquí está mi código.

ObjectList (código mínimo)

 function ObjectList({ search, setSearch, trackingObjects, loading, error, selectedObj, setSelectedObj, statusFilters, setStatusCheckboxFilters, setStatusFilters, }) { const handleClick = React.useCallback((obj) => { setSelectedObj(obj); }, []); console.log(statusFilters, "dynamic objects"); const resultObjs = filterSearch( filterObjects(trackingObjects, statusFilters), search ); const [res, setReset] = useState(false); const reset = () => setReset(!setStatusFilters); const objsWithLocations = resultObjs.filter( ({ location }) => location?.[0] !== null && location?.[0] !== undefined && location?.[1] !== null && location?.[1] !== undefined ); const defaultFilterState = useMemo( () => makeDefaultFilterState(trackingObjects), [trackingObjects] ); const filterOptionsObj = useMemo( () => makeFilterOptionsObj(trackingObjects), [trackingObjects] ); const resetAllFilters = () => { setStatusFilters([]); }; const filterHandler = (e) => { setStatusFilters({ ...statusFilters, [e.target.name]: e.target.checked }); }; const discardFilters = () => { setStatusFilters([]); }; }

Botón para restablecer el objeto statusFilters a nulo.

 <Button variant="text" text="Reset" sx={{ fontSize: "24px", p: 0, verticalAlign: "baseline", ml: "6px", textTransform: "none", }} onClick={() => resetAllFilters()} />

Pero cuando hago clic en el botón Reset , obtuve TypeError: statusFilters is not a function at resetAllFilters . ¿Cómo puedo solucionar este problema?

Aquí está la salida de registro de la consola del objeto statusFilters