Javascript react redux中映射字典中的If语句

我有一本字典，里面有带卡片的东西。我只想在当前用户值等于存储的用户值时显示每张卡。也就是说，如果用户创建了该卡

           <CardDeck>
            {this.props.homeTdps.map(function (tdp, key) {
              if ({currentUser.username} == {this.props.tdpDetail.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>
                );
              // }
            })}
          </CardDeck>

我目前的错误如下。。。

任何解决方案都值得赞赏

谢谢

编辑：

我还尝试从第三行中删除了花括号：

if (currentUser.username == this.props.tdpDetail.created_by.username)

然后我得到错误“TypeError:无法读取未定义的属性'props'

但是，当我像这样打印标题中的两个值时，它们都打印得很好（并且用户是相同的值）

{currentUser.username}
{this.props.tdpDetail.created_by.username}

• 从if语句中删除花括号

• 使用

  map

  上的箭头功能将

  此

  正确绑定到您的组件类：

        {this.props.homeTdps.map((tdp, key) => {
          if (currentUser.username == this.props.tdpDetail.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>
            );
          // }
        })}
  

  {this.props.homeTdps.map（（tdp，key）=>{
  if（currentUser.username==this.props.tdpDetail.created_by.username）
  返回(
  {tdp.part_name}
  {tdp.description}
  下载
  );
  // }
  })}
  

---

if（currentUser.username==this.props.tdpDetail.created_by.username）

将其更改为

if（currentUser.username==this.props.tdpDetail.created_by.username）

并重试。嗨，我已经试过了。但是我得到错误“TypeError:无法读取未定义的属性'props'。但是，当我在一个标题中打印这两个值时，它们都打印得很好（并且用户是相同的值）。{currentUser.username}{this.props.tdpDetail.created_by.username}@EmmanuelHuff您使用的是功能组件还是类组件？@带有React Reduxthank的近类组件谢谢！成功了。你介意向我解释一下为什么需要绑定“=>”吗？不客气

这

在函数声明中，比如

function（）{}

没有绑定到它的上下文，同时箭头函数总是绑定它声明的上下文。

<h3>{currentUser.username}</h3> 
<h3>{this.props.tdpDetail.created_by.username}</h3> 

      {this.props.homeTdps.map((tdp, key) => {
        if (currentUser.username == this.props.tdpDetail.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>
          );
        // }
      })}