es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo obtener un elemento único de Redux con un operador condicional?

28 May, 2023 Programación

Estoy intentando obtener datos únicos del almacenamiento Redux pero obtengo todos los valores del almacenamiento Redux. Utilizo el gancho usePerma para comprobar el id de la URL y el id de los datos de Redux y luego aplico el operador ternario, pero no obtengo el resultado deseado. Consulte la imagen y el código de salida y por favor indique cómo obtener solo un valor de eso.

Cuando la URL es 1002, solo se debe mostrar el artículo 1002, pero también se muestra el artículo 1001.

Aquí está mi código:

import React from ‘react’;
import { NavLink } from ‘react-router-dom’;
import { useStateValue } from ‘./Stateprovider’;
import { useParams } from ‘react-router’;

const User = () => {
const [{basket}, dispatch] = useStateValue();

const {id} = useParams();

return (
    <>
         {basket.map((item) => (
            <>
            {
                (id === item.id) ?   // Error
                <div key="id" classname="card">
                <img src="{item.Image}" alt="">
                <div classname="card-data">
                <h3><span>User Id:</span>{item.id}</h3>
                <h2><span>Name:</span>{item.name}</h2>
                </div>
                 <navlink classname="button" exact="" to='/home'> User Info </navlink>
            </div>
             : null
            }

         ))}

)

}

export default User;

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener sólo datos únicos de la tienda Redux, se puede utilizar el método filter en lugar del método map. Aquí presentamos un código de ejemplo actualizado que debería solucionar el problema:

    import React from 'react';
import { NavLink } from 'react-router-dom';
import { useStateValue } from './Stateprovider';
import { useParams } from 'react-router';

const User = () => {
  const [{ basket }, dispatch] = useStateValue();

  const { id } = useParams();

  const filteredItems = basket.filter((item) => item.id === Number(id));

  return (
    <>
      {filteredItems.map((item) => (
        <div key="{item.id}" classname="card">
          <img src="{item.Image}" alt="">
          <div classname="card-data">
            <h3>
              <span>Id de Usuario: </span>
              {item.id}
            </h3>
            <h2>
              <span>Nombre: </span>
              {item.name}
            </h2>
          </div>
          <navlink classname="button" exact="" to="/home">
            Información del Usuario
          </navlink>
        </div>
      ))}

  );
};

export default User;

    En este código actualizado, primero filtramos la matriz basket en función del id de la URL, y luego mapeamos los elementos filtrados para renderizarlos. Además, note que convertimos el id de la URL a un número antes de compararlo con el item.id para evitar cualquier error de tipo.

Comments are closed.