React Native map遍历写if触发Unexpected token ","报错

Unexpected token, expected "," 是JSX语法解析阶段触发的错误，核心问题出在map回调的写法上：

• map的箭头函数用( )做隐式返回时，圆括号仅支持放置可求值的表达式/JSX节点，不能直接塞独立的if流程控制语句，否则会触发解析失败
• if块外层额外嵌套了无意义的JSX花括号，让解析器把这段代码识别成需要求值的JSX表达式，而if语句本身不是可求值的表达式
• if块和后面的<Text>节点并列放在map返回的序列里，解析器识别完if块语法后，没有找到分隔多个返回值的逗号，直接抛出token不匹配的报错
  

方案1：适配带副作用的判断逻辑 #

如果if判断需要执行console.log这类独立操作，把map回调的隐式返回改成大括号包裹的显式代码块，内部正常写判断逻辑，最后明确return要渲染的节点：

render() {
  return (
    <View>
      <Text>My List view</Text>
      {
        this.state.fruits.map((item) => {
          // 代码块内可正常编写任意流程控制逻辑
          if(item.id % 2 === 0) {
            console.log("Even Number")
          }
          // 必须return对应的渲染节点
          return (
            <Text key={item.id}>
              {item.id + ". " + item.name}
            </Text>
          )
        })
      }
    </View>
  )
}

方案2：适配纯条件渲染逻辑 #

如果if判断仅用于控制渲染内容、不需要执行独立副作用，可以直接用三元表达式替代独立if块，保持map回调的隐式返回写法：

render() {
  return (
    <View>
      <Text>My List view</Text>
      {
        this.state.fruits.map((item) => (
          <Text key={item.id}>
            {item.id % 2 === 0 ? '偶数项 | ' : '奇数项 | '}
            {item.id + ". " + item.name}
          </Text>
        ))
      }
    </View>
  )
}

• map返回的每个节点必须绑定全局唯一的key属性，不要将key绑定在节点内部的文本上
• JSX的花括号内部仅支持放置可求值的表达式，不支持直接编写独立的if、for这类流程控制语句，这类语句需要放在map回调的大括号代码块内部执行

内容的提问来源于stack exchange，提问作者Rohit Mandiwal