尝试创建一个对象值数组以用作下拉列表的选项

Question

我正在尝试创建一个包含键、值、文本和图像字段的对象数组，用作语义-ui 下拉组件的选项，如下所示：

    const mappedFollowers = followers.map(follower => {
    return {
      key: follower.uid, text: `${follower.firstName} ${follower.lastName}`, value: follower.uid, image: {avatar: true, src:{follower.profileImgUrl ? follower.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png'}}
    }
  })

  const mappedFollowing = following.map(follow => {
    return {
      key: follow.uid, text: `${follow.firstName} ${follow.lastName}` value: follow.uid, image: {avatar: true, src:{follow.profileImgUrl ? follow.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png'}}
    }
  });

编译后，我收到错误 解析错误：意外的标记，预期为“,” 行：

const mappedFollowers = followers.map(follower => { 678 | return { 679 | key: follower.uid, text: ${follower.firstName} ${follower.lastName}, value: follower.uid, image: {avatar: true, src:{follower.profileImgUrl ? follower.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png'}} | ^ 680 | } 681 | })

我需要有关如何解决此问题的帮助或我想要实现的目标的替代解决方案

Answer 1

我猜 mappedFollowing 中缺少逗号 属性

  const mappedFollowing = following.map(follow => {
    return {
      key: follow.uid, text: `${follow.firstName} ${follow.lastName}`, value: follow.uid, image: {avatar: true, src:{follow.profileImgUrl ? follow.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png'}}
    }
  });

Answer 2

给你：

const mappedFollowers = followers.map(follower => {
  return {
    key: follower.uid, text: `${follower.firstName} ${follower.lastName}`, value: follower.uid, image: { avatar: true, src: follower.profileImgUrl ? follower.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png' }
  }
})

const mappedFollowing = following.map(follow => {
  return {
    key: follow.uid, text: `${follow.firstName} ${follow.lastName}`, value: follow.uid, image: { avatar: true, src: follow.profileImgUrl ? follow.profileImgUrl : 'https://react.semantic-ui.com/images/wireframe/image.png' }
  }
});

问题是，当你使用三元表达式时，你不需要用 {}.

包装它