React Native条件渲染不生效，提示组件无返回渲染内容报错如何解决？

错误根因 #

• React组件接收的第一个参数是整体props对象，你当前function Users(team)的team变量实际为{team: 1}或{team: 2}的对象，永远不满足team === 1或team === 2的判断条件，所有逻辑分支都未命中，没有返回任何渲染内容，因此触发报错。
• 原有逻辑未覆盖异常入参场景，缺少兜底返回，同时你提供的代码片段里Users函数末尾缺失闭合的}，也可能导致语法异常。

修复代码 #

首先修正Users组件的参数解析和逻辑兜底：

// 解构props拿到传入的team字段
function Users({ team }) {
    if (team === 1) {
        if (usersOfTeam1.length === 0) {
            return (<Text>(Empty)</Text>)
        }
        else {
            return (<FlatList
                data={usersOfTeam1}
                renderItem={({ item }) => (
                    <Text>{item.username}</Text>
                )}
            />)
        }
    }
    else if (team === 2) {
        if (usersOfTeam2.length === 0) {
            return (<Text>(Empty)</Text>)
        }
        else {
            return (<FlatList
                data={usersOfTeam2}
                renderItem={({ item }) => (
                    <Text>{item.username}</Text>
                )}
            />)
        }
    }
    // 兜底返回，避免异常入参触发报错
    return null
}

可选优化 #

可以抽离重复逻辑，简化组件写法：

function Users({ team }) {
  const currentTeamUsers = team === 1 ? usersOfTeam1 : (team === 2 ? usersOfTeam2 : [])
  if (currentTeamUsers.length === 0) {
    return <Text>(Empty)</Text>
  }
  return (
    <FlatList
      data={currentTeamUsers}
      renderItem={({ item }) => <Text>{item.username}</Text>}
    />
  )
}

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