使用===对相同字符串比较进行反应总是求值为False

Question

我有一个组件，它使用从父级传递下来的一些状态。如果用户已登录并且字符串匹配，则该组件将进行渲染。如果是，请显示，否则不要。我已经将=打印到控制台中，以确保字符串没有空格。

尽管条件语句是正确的"；非所有者"；仍然显示它应该是"什么时候"；所有者"；。

以下是简化的组件：

import React from "react";
const EditButton= ({
isUserLoggedIn,
username,
sellersUsername,
}) => {
return (
<>
{isUserLoggedIn&& username === sellersUsername? (
<>OWNER</>
) : (
<>NOT OWNER</>
)}
{console.log(`=${isUserLoggedIn}=`)}
{console.log(`=${username}=`)}
{console.log(`=${sellersUsername}=`)}
{console.log(username=== sellersUsername)}
{console.log(
username.localeCompare(sellersUsername, "en", {
sensitivity: "base",
})
)}
{console.log(isUserLoggedIn&&username===sellersUsername)}
</>
);
};
export default GalleryEditButton;

输出：

// should evaluate to true but does not
=true=
=RandomTestUsername=
=RandomTestUsername=
false
0
false

有什么想法吗？

Answer 1

我的建议是检查这两个变量的类型。因为===是一个严格的检查，它区分大小写，也区分类型。

Answer 2

代码示例

我试着在我的机器上运行类似的场景，结果是你所期望的。

我的建议是尝试跟踪"；用户名"；以及"；sellersUsername；也许其中一个没有更新。

问题最有可能出现在这两个道具中的一个，因为username === sellersUsername是返回false的原因。