Javascript 显示组件中函数返回的值

我有这个组件

Field.jsx

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

players是一个目录列表，包含如下结构：

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

我创建了这个函数来过滤DICT列表，以便根据位置显示所有球员的姓名：

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

在这里，我试图显示函数直接返回的第一个播放器“name”，带有：

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}
  }
}

render（）{
const{players}=this.props；
国际单项体育联合会（球员）{
返回(
{this.getPlayersByPosition（玩家，'Forward'）[0]}>//不起作用
{players[1].name}//有效
);
}否则{
返回空值}
}
}

---

在我的第一次

中，当我尝试应用该函数时，我得到：

在第二次打印值时：

---

---

如何解决此问题？

中的React对象作为子对象无效。因此，当您尝试渲染时

{this.getPlayersByPosition(players, 'Forward')[0]}

它从过滤数组返回第一个对象。 如果你这样做

{this.getPlayersByPosition(players, 'Forward')[0].name}

---

它应该在React对象作为子对象无效时起作用。因此，当您尝试渲染时

{this.getPlayersByPosition(players, 'Forward')[0]}

它从过滤数组返回第一个对象。 如果你这样做

{this.getPlayersByPosition(players, 'Forward')[0].name}

---

它应该可以工作

您的

getPositionData

功能毫无意义。您根本不使用

val

参数，而是将

players

状态值设置为自身，而该值不起任何作用。此外，您通过

props.children

将过滤后的玩家传递到

handleClick

的方式非常不寻常，绝对不是反应方式。另外，调用

getPlayerByPosition（players，name）

将返回一个player对象数组，而

players[1].name只返回一个字符串，因此这两个字符串在任何方面都是不等价的。很难给出建议，因为没有任何一个主要错误，但一个好的开始是将筛选出的位置玩家列表作为道具传递给位置组件，然后位置组件可以直接渲染它们。我正在学习…我知道它们并不等价…但我需要使用第一种方法返回字符串。您能帮我修复一下函数中的错误吗？忘记
getPositionData
。除了点击处理之外，这与这里的问题无关。顺便说一下，它在控制台上工作。这里的问题是从函数中获取字符串并显示它。如果您澄清GetPlayerByPosition（），我肯定会接受并投票您的
getPositionData
函数毫无意义。您根本不使用
val
参数，而是将
players
状态值设置为自身，而该值不起任何作用。此外，您通过
props.children
将过滤后的玩家传递到
handleClick
的方式非常不寻常，绝对不是反应方式。另外，调用
getPlayerByPosition（players，name）
将返回一个player对象数组，而
players[1].name只返回一个字符串，因此这两个字符串在任何方面都是不等价的。很难给出建议，因为没有任何一个主要错误，但一个好的开始是将筛选出的位置玩家列表作为道具传递给位置组件，然后位置组件可以直接渲染它们。我正在学习…我知道它们并不等价…但我需要使用第一种方法返回字符串。您能帮我修复一下函数中的错误吗？忘记
getPositionData
。除了点击处理之外，这与这里的问题无关。顺便说一下，它在控制台上工作。这里的问题是从函数中获取字符串并显示它。如果您澄清GetPlayerByPosition（），我肯定会接受并投票