如何编写匹配programId后输出对应program_name的三元运算符？

代码修改方案 #

你可以借助Array.find()方法先匹配到id对应的program条目，再通过三元运算符判断是否存在匹配项输出对应内容，修改后的代码如下：

基础写法（直接用三元运算符实现）

{
  id: "program",
  label: "Program",
  customCell: r => (
    <td>
      {r.programschosen.find(e => e.id === this.props.location.state.programId) 
        ? r.programschosen.find(e => e.id === this.props.location.state.programId).program_name 
        : r.programschosen.map(e => e.program_name).join(", ") /* 无匹配时可替换为你需要的兜底内容，比如"无匹配程序"也可以 */}
    </td>
  )
},

优化写法（避免重复执行查找逻辑，性能更好）

{
  id: "program",
  label: "Program",
  customCell: r => {
    // 先缓存匹配到的program条目
    const matchedProgram = r.programschosen.find(e => e.id === this.props.location.state.programId)
    return (
      <td>
      {/* 三元运算符判断：匹配到输出对应名称，没匹配到输出兜底内容 */}
      {matchedProgram ? matchedProgram.program_name : r.programschosen.map(e => e.program_name).join(", ")}
    </td>
    )
  }
},

逻辑说明 #

• Array.find()会返回数组中第一个满足id相等条件的元素，无匹配项时返回undefined
• 三元运算符先判断是否存在匹配的program条目，存在直接返回对应program_name，不存在则返回你指定的兜底内容，你可以根据需求调整冒号后的兜底输出，比如设置为''空字符串或者未找到匹配程序的提示文字均可。

内容的提问来源于stack exchange，提问作者john smith