Блог

Я пытаюсь извлечь только уникальные данные из магазина redux, но получил все значения из магазина redux. Я использую крючок usePerma для проверки идентификатора из URL и идентификатора данных redux, затем применяю тернарный оператор, но не получил желаемого результата. Посмотрите выходное изображение и код и, пожалуйста, расскажите, как получить из этого только одно значение.

Когда URL равен 1002, должно отображаться только 1002 элемента, но также отображается 1001 элемент.

Вот мой код:

 import React from 'react' import { NavLink } from 'react-router-dom'; import { useStateValue } from './Stateprovider'; import { useParams } from 'react-router';  const User = () =gt; {  const [{basket}, dispatch] = useStateValue();   const {id} = useParams();   return (  lt;gt;  {basket.map((item) =gt; (  lt;gt;  {  ({id} === {item.id}) ? //Error  lt;div key="id" className="card"gt;  lt;img src={item.Image} alt="" /gt;  lt;div className="card-data"gt;  lt;h3gt;lt;spangt;User Id: lt;/spangt;{item.id}lt;/h3gt;  lt;h2gt;lt;spangt;Name: lt;/spangt;{item.name}lt;/h2gt;  lt;/divgt;  lt;NavLink className="button" exact to='/home' gt; User Info lt;/NavLinkgt;  lt;/divgt;  : null  }  lt;/gt;  ))}  lt;/gt;  ) }  export default User;  

Если я правильно понял ваш вопрос, вы хотите сопоставить только те элементы из basket массива id , которые соответствуют параметру соответствия. Для этого вы можете либо Array.prototype.find сначала найти соответствующий элемент и выполнить условную визуализацию, если он найден, либо использовать Array.prototype.filter и просто отфильтровать встроенный массив.

Фильтрация встроенного массива:

 const User = () =gt; {  const [{basket}, dispatch] = useStateValue();   const { id } = useParams();   return (  lt;gt;  {basket  .filter(item =gt; item.id === id)  .map((item) =gt; (  lt;div key={item.id} className="card"gt;  lt;img src={item.Image} alt="" /gt;  lt;div className="card-data"gt;  lt;h3gt;lt;spangt;User Id: lt;/spangt;{item.id}lt;/h3gt;  lt;h2gt;lt;spangt;Name: lt;/spangt;{item.name}lt;/h2gt;  lt;/divgt;  lt;NavLink className="button" exact to='/home'gt;  User Info  lt;/NavLinkgt;  lt;/divgt;  ))  }  lt;/gt;  ) }  

Сначала поиск, затем рендеринг: помните, что .find возвращает значение undefined, если совпадение не найдено

 const User = () =gt; {  const [{basket}, dispatch] = useStateValue();   const { id } = useParams();   const item = basket.find(item =gt; item.id === id);   return item ? (  lt;div className="card"gt;  lt;img src={item.Image} alt="" /gt;  lt;div className="card-data"gt;  lt;h3gt;lt;spangt;User Id: lt;/spangt;{item.id}lt;/h3gt;  lt;h2gt;lt;spangt;Name: lt;/spangt;{item.name}lt;/h2gt;  lt;/divgt;  lt;NavLink className="button" exact to='/home'gt;  User Info  lt;/NavLinkgt;  lt;/divgt;  ) : null; }