如何使用条件运算符从 redux 中获取唯一项？

Question

我试图仅从 redux 存储中获取唯一数据，但从 redux 存储中获取了所有值。我使用 usePerma 钩子检查来自 URL 的 id 和 redux 数据的 id 然后应用三元运算符但没有得到所需的输出。查看输出图像和代码，请告诉我如何只从中获取一个值。

当 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 = () => {
    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;

Answer 1

如果我对您的问题的理解正确，您只想映射 basket 数组中与 id 匹配参数匹配的项目。为此，您可以使用 Array.prototype.find 首先找到匹配项并在找到时有条件地呈现，或者使用 Array.prototype.filter 并仅内联过滤数组。

内联过滤数组：

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

  const { id } = useParams();

  return (
    <>
      {basket
        .filter(item => item.id === id)
        .map((item) => (
          <div key={item.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>
        ))
      }
    </>
  )
}

先查找，再渲染：记住 .find returns 如果找不到匹配项则未定义

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

  const { id } = useParams();

  const item = basket.find(item => item.id === id);

  return item ? (
    <div 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;
}

如何使用条件运算符从 redux 中获取唯一项？

How to fetch unique item from redux with conditional operator?

web-deployment

reactjs

redux