React Redux中map遍历渲染时按创建用户过滤卡片的报错问题

• 最初的语法报错来源：JSX语法中的{}仅用于在JSX标签树内嵌入JS表达式，你写的条件判断处于map回调的纯JS执行块范围内，不属于JSX节点位置，直接用{}包裹JS变量属于语法误用，自然触发报错。
• 后续的Cannot read property 'props' of undefined报错来源：你给map传入的是普通匿名function作为回调，这类函数不会自动继承外层组件的上下文this，在React默认的严格模式下，普通函数内部的this默认为undefined，根本访问不到挂载在组件实例上的props。你之前在顶层JSX的h3标签里能正常打印这两个值，是因为那个位置的this正确指向组件实例，进入map回调后作用域切换，this丢失才触发报错。
• 隐藏的逻辑bug：你遍历的是this.props.homeTdps数组里的单张卡片，判断条件里却取了this.props.tdpDetail.created_by的值做对比，这个值是全局单个详情对象的属性，不是当前正在遍历的单张卡片的创建人字段，就算解决了上下文绑定的问题，最终过滤逻辑也不符合“仅展示当前用户创建的卡片”的需求。

1. 将map的普通匿名函数替换为箭头函数，箭头函数会自动继承外层词法作用域的this，不需要手动做上下文绑定
2. 条件判断块去掉所有多余的JSX大括号，直接书写纯JS的变量引用
3. 将判断逻辑中的对比值，从全局的tdpDetail对象替换为当前遍历项tdp自身的created_by字段

<CardDeck>
  {this.props.homeTdps.map((tdp, key) => {
    // 匹配当前用户与当前卡片创建人，匹配则渲染卡片，不匹配返回空节点
    if (currentUser.username === tdp.created_by.username) {
      return (
        <Card.Link 
          key={key} 
          href={`/tdps/${tdp.id}/`} 
          style={{ minWidth: '20rem', maxWidth: '20rem' }}
        >
          <Card.Body>
            <Card.Title>{tdp.part_name}</Card.Title>
            <Card.Text>{tdp.description}</Card.Text>
            <Button variant="primary">Download</Button>
          </Card.Body>
        </Card.Link>
      )
    }
    return null
  })}
</CardDeck>

• 确认currentUser变量在map回调的作用域内可正常访问，避免出现未定义变量报错
• 建议使用严格相等===代替宽松相等==做字段对比，避免类型隐式转换带来的匹配失效
• 如果项目不支持箭头函数的语法，也可以在map方法的第二个参数中手动传入外层组件的this，或在回调开头将组件实例的this存为局部变量（如const componentThis = this），后续通过componentThis.props访问属性即可。

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