React保存的值总是读取为NULL

Question

我有一个组件，它在路由中从另一个组件传递了一个parameter。为了使用value，我节省了成本。

const params = useParams()
const id = params.id; 

如果我点击Card component，它会引导我到另一条包含card details组件的路线

当使用CCD_ 5时，我得到了合适的值。

现在我有了这个来自后端的对象数组，在那里我需要ID参数进行比较。

const [state, setState] = useState<any>(store.getState().perfumeState.perfumes);

这里是存储在redux存储器中的perfumes的阵列

所以基本上，我想做的是用给定的ID找到特定的perfume对象，为此我使用了：

var result = state.filter(obj => {
return obj.id === id // <------- Returns `NULL` // return obj.id === 2 // <-------- Returns correct value
})

我有个问题。当我硬编码一个数字时，我会得到正确的结果，然而，当我使用id值时，它会返回null。而且，我每次都得到one对象的array，而不是得到一个对象。

Answer 1

来自useParams的路由参数始终具有string值(或为undefined(。因此，如果对象上的id字段的类型为number，那么使用严格相等运算符(===(的相等检查将永远不会通过

可以通过使用普通相等运算符(==(或将id(从params(强制转换为number来解决此问题。

任一：

const result = state.filter(obj => obj.id == id);

或：

const result = state.filter(obj => obj.id === Number(id));

建议强制转换为数字并保持严格相等(特别是因为esint设置可能会警告您不要使用普通相等运算符(。

---

对于获取单个对象而不是数组，可以使用find方法(而不是filter(，它将返回满足条件的第一个元素或undefined。像这样：

const result = state.find(obj => obj.id === Number(id));