Question

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

我正在使用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 });

感谢您对此问题的任何帮助和指导。干杯！

已解决：

感谢诺亚·艾伦，我使用lodash解决了这个问题

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

Answer 1

编辑：Lodash单线：

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

要修正您的示例，您实际上只需要添加一对括号（如下所述）：

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

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

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 })

基本上，您是将函数用户名传递给提交的，而不是运行函数并将函数结果传递给提交的。在此示例中，您在其他地方定义了检查用户名功能以帮助抽象。然后在提交中运行该函数并将其结果传递给submitUserReview函数。

请注意，在JS中，当您具有函数：const x = () => 1时，x的类型将是函数。一旦使用括号，函数将被调用：x()，并返回值。因此，在您的原始示例中，您将x作为参数传递-这意味着它从未被评估过，而是将一个函数传递给了商店。您需要从中获取价值，然后将 that 传递给redux。

这也是将功能绑定到组件时的一个很好的认识。例如： <Button onPress={this.doSomething()} />。在这种情况下，函数doSomething将在加载Button时得到评估，而当您真正想在其被点击时对其求值时，就将得到评估，例如：Button onPress={this.doSomething} />。在这种情况下，onPress会评估该函数，因此您无需自己执行。

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

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

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

Answer 2

您无需为此小功能创建功能。您可以按以下方式编写它：

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

如果this.props.userData.username.username的值不正确，即为null或未定义或为空字符串，则它将传递Anonymous作为参数。因此，它将解决您的用例。

在React Native中处理空用户名

2 个答案: