React条件绑定Firebase数据到Dropdown报错：no-unused-expressions

嗨，我来帮你搞定这个报错！你遇到的Expected an assignment or function call and instead saw an expression错误，根源在map遍历的箭头函数写法上，具体来说：

你用了带大括号{}的箭头函数，但里面的三元表达式只是一个“孤立”的表达式，没有被return出去——ESLint会把这种没被使用的表达式判定为无效代码，所以抛出了这个错误。

下面给你三种可行的修复方案：

方案1：用隐式return的箭头函数（去掉大括号） #

直接去掉箭头函数的大括号，让三元表达式的结果自动作为map的返回值，代码更简洁：

<TextField 
  id="sp_Role" 
  select 
  label="Select Role" 
  fullWidth 
  required 
  className={classes.textField} 
  value={this.state.sp_Role} 
  helperText={this.state.sp_RoleError} 
  error={!!this.state.sp_RoleError} 
  onChange={(e) => this.handleChangedropdown('sp_Role')(e)} {/* 顺便修复onChange的执行时机问题 */}
  SelectProps={{ 
    MenuProps: { className: classes.menu }
  }} 
  margin="normal"
>
  {role && role.map(option => 
    option.role_ActiveFlag === "1" ? (
      <MenuItem key={option.id} value={option.role_Name}>
        {option.role_Name}
      </MenuItem>
    ) : null
  )}
</TextField>

方案2：显式添加return语句 #

如果想保留大括号，就在三元表达式前面加上return，明确告诉JS要返回这个JSX元素：

{role && role.map(option => {
  return option.role_ActiveFlag === "1" ? (
    <MenuItem key={option.id} value={option.role_Name}>
      {option.role_Name}
    </MenuItem>
  ) : null
})}

方案3：先过滤再map（更清晰的写法） #

先通过filter把符合role_ActiveFlag==="1"的选项筛选出来，再进行map遍历，逻辑更直观，也避免了返回null的情况：

{role && role
  .filter(option => option.role_ActiveFlag === "1")
  .map(option => (
    <MenuItem key={option.id} value={option.role_Name}>
      {option.role_Name}
    </MenuItem>
  ))
}

另外还要提醒你一个小问题：你当前的onChange={this.handleChangedropdown('sp_Role')}会导致组件一渲染就执行handleChangedropdown函数，而不是在选择变化时触发。改成箭头函数包裹（如方案1所示），或者让handleChangedropdown返回一个处理函数，就能解决这个问题。

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