React下拉菜单出现空白行，如何将索引0的用户名称固定显示为Myself？

有两种修改方式可选，可根据业务场景选择：

方案1：获取数据后加工数组（推荐） #

该方案仅修改数据源，后续所有用到users数组的场景都会自动生效，无需重复处理。
修改componentDidMount中setState的users赋值逻辑，代码如下：

async componentDidMount() {
  const ep = `${process.env.REACT_APP_API}/partners/roles`;
  const users = await axios.get(ep);
  
  if (users.data.success) {
    this.setState({
      // 过滤后对索引为0的用户统一修改username为Myself
      users: users.data.data.users.filter(f => !f.isArchived).map((user, idx) => 
        idx === 0 ? {...user, username: 'Myself'} : user
      )
    });
  }
  console.log("Users", users)
  if (this.props.item) {
    this.setState({
      id: this.props.item.id,
      description: this.props.item.description,
      due: this.props.item.due,
      priority: this.props.item.priority,
      assigned: this.props.item.assigned
    });
  }
}

方案2：渲染下拉时直接判断 #

如果不想修改原始的users数组数据，仅需要下拉菜单场景生效，可以直接修改下拉选项的渲染逻辑：

<select
  name="assigned"
  id="assignedto"
  type="text"
  className="form-control"
  style={{ width: "70%" }}
  onChange={e => {
    this.setState({
      assigned: e.target.value
    });
  }}
>
<option value="">Myself</option>
  {this.state.users.map((e, idx) => (
    <option value={e.id} key={e.id}>
      {/* 索引为0时固定显示Myself，其他情况正常显示username */}
      {idx === 0 ? 'Myself' : e.username}
    </option>
  ))}
</select>

注意事项 #

当前代码中已经硬编码了一个值为空的Myself默认选项，如果修改后下拉列表出现两个Myself选项，可以根据实际业务需求删掉这个硬编码的默认项即可。

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