如何使用条件运算符从Redux中获取与URL参数匹配的唯一数据项

问题原因 #

• 核心错误来自对比语句({id} === {item.id})：此处你用花括号包裹两个值生成了两个独立的匿名对象，JS中对象为引用类型，只有指向同一内存地址时全等判断才会返回true，因此该判断永远不成立，三元运算失效导致所有条目都被渲染。
• 次要问题1：useParams返回的id为字符串类型，若Redux中存储的item.id为数字类型，直接对比也会出现类型不匹配的问题。
• 次要问题2：列表渲染的key写死为字符串"id"，不符合React要求key唯一的规则。

优化方案 #

更推荐先从数组中查找匹配的单条数据再渲染，无需遍历整个数组，性能更高：

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 targetUser = basket.find(item => Number(item.id) === Number(id))

    return (
        <>
             {targetUser ? (
                <div key={targetUser.id} className="card">
                    <img src={targetUser.Image} alt="" />
                    <div className="card-data">
                        <h3><span>用户ID：</span>{targetUser.id}</h3>
                        <h2><span>姓名：</span>{targetUser.name}</h2>
                    </div>
                    <NavLink className="button" exact to='/home' > 用户信息 </NavLink>
                </div>
             ) : <p>未查询到对应用户</p>}
        </>
    )
}

export default User;

如果要保留你原本的map写法，仅修改对比语句即可：

{basket.map((item) => (
    Number(id) === Number(item.id) ?   
    <div key={item.id} className="card">
        <img src={item.Image} alt="" />
        <div className="card-data">
        <h3><span>用户ID：</span>{item.id}</h3>
        <h2><span>姓名：</span>{item.name}</h2>
        </div>
         <NavLink className="button" exact to='/home' > 用户信息 </NavLink>
    </div>
     : null
))}

内容的提问来源于stack exchange，提问作者Ankit Kumar