在 React Native 的 const 中插入 if/else 语句的正确方法

Question

我不断收到synax错误，我不确定如何以其他方式执行此操作：

    const new_datas = [
      if(this.state.username != '') {
      {
        name: "Plaza",
        route: "TabNav",
        icon: require("../img/plaza_party.png"),
        bg: "#C5F442"
      },
      {
        name: `${this.state.thefirstname}'s Profile`,
        route: "ProfileScreen",
        icon: require("../img/pass.png"),
        bg: "#C5F442"
      },
    }
    else{
      {
        name: "Plaza",
        route: "TabNav",
        icon: require("../img/plaza_party.png"),
        bg: "#C5F442"
      },
      {
        name: "Login/Sign Up",
        route: "LoginScreen",
        icon: require("../img/pass.png"),
        bg: "#477EEA",
      },
    }
  ];

基本上应该发生的事情是，一旦用户名被存储为状态，它应该更新内容，然后从Login/Signup切换到this.state.firstname Profile。有没有正确的方法来实现这一点？

编辑：额外代码：

<List
        dataArray={new_datas}
        renderRow={data =>
          <ListItem
            button
            noBorder
            onPress={() => this.props.navigation.navigate(data.route)}
          >
            <Left>
              <Image
                active
                source={data.icon}
                style={{ height: 50, width: 50 }}
              />
              <Text style={styles.text}>
                {data.name}
              </Text>
            </Left>
            {data.types &&
              <Right style={{ flex: 1 }}>
                <Badge
                  style={{
                    borderRadius: 3,
                    height: 25,
                    width: 72,
                    backgroundColor: data.bg
                  }}
                >
                  <Text
                    style={styles.badgeText}
                  >{`${data.types} Types`}</Text>
                </Badge>
              </Right>}
          </ListItem>}
      />

登录后，此部分不会更改。

Answer 1

我认为三元运算符是你所追求的：

const new_datas = props.username ? [
  {
    name: "Plaza",
    route: "TabNav",
    icon: require("../img/plaza_party.png"),
    bg: "#C5F442"
  },
  {
    name: `${this.state.thefirstname}'s Profile`,
    route: "ProfileScreen",
    icon: require("../img/pass.png"),
    bg: "#C5F442"
  } 
]:[
  {
    name: "Plaza",
    route: "TabNav",
    icon: require("../img/plaza_party.png"),
    bg: "#C5F442"
  },
  {
    name: "Login/Sign Up",
    route: "LoginScreen",
    icon: require("../img/pass.png"),
    bg: "#477EEA",
  },
];

Answer 2

使用 let，如果没有用户名分配一些值

let new_datas = [];
  if(this.state.username != '') {
    new_datas = [{
      name: "Plaza",
      route: "TabNav",
      icon: require("../img/plaza_party.png"),
      bg: "#C5F442"
    },
    {
      name: `${this.state.thefirstname}'s Profile`,
      route: "ProfileScreen",
      icon: require("../img/pass.png"),
     bg: "#C5F442"
    },]
  }else{
    new_datas = [{
      name: "Plaza",
      route: "TabNav",
      icon: require("../img/plaza_party.png"),
      bg: "#C5F442"
    },
    {
      name: "Login/Sign Up",
      route: "LoginScreen",
      icon: require("../img/pass.png"),
      bg: "#477EEA",
    },]
  }

Answer 3

我不确定为什么你在 if 和 else 大括号中有两个对象声明。您是否缺少数组大括号和变量名称？

如果我要这样做，我首先需要找到用户名的触发事件，例如输入字段 onChange 事件，然后让该事件触发一个函数。在触发的函数中，我将添加一个 setState 用户名。然后在渲染函数中，我将添加评估 this.state.username 的条件。