Reactjs 在React Native中处理空用户名

我在我的应用程序中有一个评论部分，它使用用户的用户名作为标题以及他们的评论。除非用户尚未设置用户名，否则一切正常。我试图创建一个条件，如果用户没有设置用户名，它将是匿名的

我正在使用Redux添加评论

以下是我的代码，我在其中向操作创建者发送操作以及用户名、uid和审阅：

const review = this.props.review.review;
//const username = this.props.userData.username.username;
const uid = this.props.string.uid;

const username = () => {
   if (!this.props.userData.username.username) {
         return 'Anonymous';
    }
          return this.props.userData.username.username;
    };

 //dispatch action with my values
 this.props.submitUserReview({ review, username, uid });

我感谢在这个问题上给予的任何帮助和指导。干杯

已解决：

多亏了Noah Allen，我用lodash解决了这个问题：

---

const username=uu.get（userData，'username.username'，'Anonymous'）

编辑：Lodash一行：

const username = _.get(userData, 'username.username', 'Anonymous')

要修复您的示例，您实际上只需要添加一对括号（解释如下）：

更进一步，您应该这样做，以帮助提高代码可读性、重用性和抽象性：

function checkUsername (userData) {
  // Checks for undefined, null, and a string with no characters:
  if (userData && userData.username && userData.username.username && username.length > 0) {
    return userData.username.username
  }
  // Default case:
  return 'Anonymous'
}

然后在组件中：

 this.props.submitUserReview({ review, username: checkUsername(this.props.userData), uid })

基本上，您将函数用户名传递给提交，而不是运行函数并将函数结果传递给提交。在本例中，您在别处定义了check username函数来帮助进行抽象。然后在提交过程中运行函数并将结果传递给

submitUserReview

函数

注意，在JS中，当您有一个函数：

constx=（）=>1

时，x的类型将是一个函数。只要使用括号，函数就会被调用：

x（）

，并返回值。因此，在最初的示例中，您将

x

作为参数传递，这意味着它从未被计算过，您将函数传递到了存储中。您需要从中获取值并将其传递给redux

在将函数绑定到组件时，最好了解这一点。例如：

。在这种情况下，函数

doSomething

将在加载按钮时得到评估，当您确实希望在点击按钮时对其进行评估时，如下所示：

Button onPress={this.doSomething}/>

。在本例中，onPress对函数进行求值，因此您无需自己执行

解决问题的另一种方法是在呈现用户名的组件中：

<Text>{review.username ? review.username : 'Anonymous'}</Text>

{review.username？review.username:“匿名”}

---

如果用户名存在于审阅对象中（或组件中的外观），则有条件地显示用户名，否则显示匿名。如果您需要告诉评论是否在其他地方有用户名，这可能会很有用。

您不需要为这个小东西创建函数。您可以按以下方式编写：

this.props.submitUserReview({ review, username: (this.props.userData.username.username || "Anonymous"), uid });

---

这里，如果

this.props.userData.username.username

的值为false，即null或未定义或空字符串，则它将作为参数传递

Anonymous

。因此，它将解决您的用例。

嗨，诺亚，谢谢您的回答！出于某种原因，将（）添加到我的操作会给我一个错误（意外标记）。另外，对于CheckUsername函数，当我从操作中将username传递给它时，它是否也将username的值传递给实际函数所在的帮助文件？更具体地说，错误是什么？意外标记在哪里？我认为阅读函数，特别是javascript函数，对您来说会非常有用。也许还有一点关于函数式编程的知识。我认为这会帮助你更好地理解这个问题。基本上，在本例中，无论何时调用它，都会运行check username，它存储在哪个文件中并不重要。它可以存储在与组件相同的文件中。重要的是，当你调用它时，它会被求值，并且该对象的输入值会被求值结果替换。我实际上也犯了一个错误！您使用默认对象属性传递用户名，如下所示：

{username}

。现在只需将其更改为

{username:username（）}

或任何函数名即可。这将确保函数求值的结果成为对象属性

username

的值，我还将进行编辑，以反映您前面提到的userData对象为null的内容，以及如果userData为null，初始函数无法工作的原因是它试图从属性

userData

，但

userData

为空或未定义。这意味着它无法从中读取属性，因此会抛出错误。因此，如果您不确定其中是否有null或undefined，那么必须在对象层次结构的每个级别检查null或undefined，以保证结果。一个名为

lodash

的库可以很容易地实现这一点：

const username=uu.get（userData，'username.username'，'Anonymous'）

。为此，我尝试了以下操作，但如果我在调度中添加任何字符，如| |或（），我会得到一个错误（意外标记）。我的错，已经更新了答案！请检查，它肯定会工作的。啊，我明白了，谢谢！我现在收到一个新的错误。。。null不是一个对象（评估this.props.userData.username）我们正在传递一个字符串，我不明白它为什么抱怨obj？这意味着

this.props.userData.username.username不可用，即对象结构中的某些值为null。我假设对象结构总是存在的。在这种情况下，您可以编写
username:（this.props.userData&&this.props.userData.username&&this.props.userData.username.username）| |“匿名”
好的，我稍后回到我的办公桌上时会尝试一下，然后再联系您！当用户在其配置文件页面上输入用户名时，该对象在firebase中创建。
this.props.submitUserReview({ review, username: (this.props.userData.username.username || "Anonymous"), uid });