Tengo este componente al que se le ha pasado un parameter en su ruta desde otro componente. Guardo el value en un costo para usarlo.
const params = useParams() const id = params.id; si hago clic en el Card component me llevaría a una ruta diferente que tiene los card details del componente
cuando uso console.log(id) obtengo el valor adecuado.
ahora tengo esta matriz de objetos del back-end y ahí es donde necesito el parámetro ID para comparar.
const [state, setState] = useState<any>(store.getState().perfumeState.perfumes); Aquí está la variedad de perfumes que se almacenan en la tienda de redux
Entonces, básicamente, lo que estoy tratando de hacer es encontrar el objeto de perfume específico con la ID dada y para eso usé:
var result = state.filter(obj => { return obj.id === id // <------- Returns `NULL` // return obj.id === 2 // <-------- Returns correct value }) aquí tengo un problema. mientras codifico un número, obtengo el resultado adecuado, sin embargo, cuando uso el valor de id , devuelve null . Además, en lugar de obtener un objeto, obtengo una array de one objeto cada vez.
Los parámetros de ruta de useParams siempre tienen valores de string (o no están undefined ). Entonces, si el campo de id en sus objetos tiene un number de tipo, entonces las verificaciones de igualdad con el operador de igualdad estricta ( === ) nunca pasarán.
Puede arreglar esto usando el operador de igualdad normal ( == ) o convirtiendo id (de params ) a un number .
O:
const result = state.filter(obj => obj.id == id);o:
const result = state.filter(obj => obj.id === Number(id));Recomendaría convertir a un número y mantener una igualdad estricta (especialmente porque su configuración de eslint probablemente le advertirá sobre el uso del operador de igualdad normal).
En cuanto a obtener un solo objeto en lugar de una matriz, puede usar el método find (en lugar de filter ), que devolverá el primer elemento que satisfaga su condición o que no esté undefined . Como esto:
const result = state.find(obj => obj.id === Number(id));