0
572
VistasCómo desestructurar un Objeto de Array con useState en React
Necesito desestructurar el objeto de filtro de Array con useState en React, pero no puedo obtenerlo.
const [filter, setFilter] = useState([]); const { column, comparison, value } = filter; console.log(column); // undefinedProbé llaves, corchetes, y todavía me quedaba indefinido. ¿Alguien sabe cómo obtener esos valores?
El objeto de filtro:
filter: [ { column: 'population', comparison: 'greater than', value: '100000', } ]Registro de la consola:
3 Respuestas
Responde la pregunta0
Su filtro es una matriz, no un objeto. Probar:
const { column, comparison, value } = filter[0];
O puede destruir su matriz de filtros y luego hacer la destrucción del objeto:
const [firstItem] = filter; const { column, comparison, value } = firstItem;0
Según su última captura de pantalla de todo el componente , el problema es que está desestructurando la matriz filterByNumericValues antes de que se hidrate con los datos. Luego, su console.log tiene los datos correctos porque está en el useEffect DESPUÉS de que el estado se haya actualizado con los datos.
Dado que parece que solo está utilizando las variables de column , comparison y value en la función checkFilterByNumeric , desestructuraría el estado en ese ámbito.
function checkFilterByNumeric(planet) { const { column, comparison, value } = filterByNumericValues[0]; if (comparison === "maior que") { ... }0
Puedes hacer esto, por ejemplo:
const defaultValue = { column: 'empty', comparison: 'empty', value: 0 } const { column, comparison, value } = filter[0] || defaultValue;