ReactJS—组件中函数返回的显示值

Field.jsx

class Field extends Component {
  constructor(props) {
    super(props);
  }

players是一个包含如下结构的dict列表:

[{"name": "Edson", "position": "Forward"}...{...}, {...}]

我创建了这个函数来过滤dict列表,以便根据一个位置显示所有玩家的名字:

getPlayersByPosition = (players, position) => {
    return players.filter((player) => player.position === 'Forward');
  }

这里我试图直接显示函数返回的第一个播放器'name' <Position> HERE </Position> ,带有:

render() {
    const { players } = this.props;
    if(players){
      return (
       <div className="back">
          <div className="field-wrapper">
            <Output output={this.props} />
            <div className="row">
              <Position>
               {this.getPlayersByPosition(players, 'Forward')[0]}> //does not work
              </Position>
              <Position> 
               {players[1].name} //works
              </Position>
            </div>
          </div>
        </div>
      );
  }else{
    return null}
  }
}

在我第一次 <Position>

在第二次打印值时: