javascript - 我如何在同一代码行中使用 map() 和 find()

Question

我有 2 个文件，如示例所示:

player.js - 现在，我只使用对象中的一项

const players = {
  playerId: '5555',
  playerName: 'JHON',
  playerTeams: [real, barcelona, liverpol],
};

团队.js

const Teams = [
  { name: 'real', teamImageSrc: '' },
  { name: 'barcelona', teamImageSrc: '' },
  { name: 'liverpol', teamImageSrc: '' },
];

我在项目这个阶段的目的是检查我的 UI 代码是否能很好地显示数据，稍后我会更正 UI 背后的逻辑，现在我正在尝试做的是显示列表玩家是团队成员，我已经使用 map () 完成了这项任务，但我需要找到从 map () 获得的每个值的图像，如下例所示:

class GridPlayerTeamsMembership extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <List>
          {players.playerTeams.map(value => (
            <ListItem dense button className={classes.listItem}>
              <Avatar ? />
              <ListItemText primary={` ${value}`} />
            </ListItem>
          ))}
        </List>
      </div>
    );
  }
}

GridPlayerTeamsMembership.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(GridPlayerTeamsMembership);

Answer 1

你可以像这样创建一个函数:

teamImage = (teamName) => Teams.find(t=>t.name===teamName).teamImageSrc

然后像这样使用 teamImage:

<Avatar src={this.teamImage(value)} />