如何更改 onClick 状态？答案

【问题标题】：How do I change state onClick?如何更改 onClick 状态？
【发布时间】：2021-03-18 02:19:54
【问题描述】：

setGenreObject 状态成功运行后，如何将此函数设置为 null？我想要的是整个 CategoryContainer 在点击时消失。

    <CardContainer>
{Object.keys(ClientPdfs).map((ageName, i) => (
                <Card
                  onClick={() => setGenreObject(ClientPdfs[ageName])}
                  key={i}>
                <CategoryContainer>
                  <Overlay />
                  <CategoryPhoto src={ClientPdfs[ageName].image} alt="ages"/>
                  <CategoryName>
                    {ClientPdfs[ageName].name}
                  </CategoryName>
                  </CategoryContainer>
                </Card>
              ))}
            </CardContainer>

【问题讨论】：

标签： reactjs null setstate

【解决方案1】：

创建一个变量，将其设置为 null。我们就叫它卡片吧。

所以：let card = null

然后我们可以做一些检查，例如：

if (!state.hasRun) {
  card = <Card>...</Card>
}

然后你在 map 函数中返回 {card} 作为结果。

【讨论】：

我不太明白这一点。状态已设置为 null。我希望它 onClick 返回 null。我可能在我没有多大意义的地方措辞错误。当它看起来像这样时：onClick={() => setGenreObject(null)} 更改状态很容易，但是当它看起来像这样时：onClick={() => setGenreObject(ClientPdfs[ageName])} 我被困在如何在成功运行一次后将状态更改为 null。
除非单击按钮后没有发生状态更改，否则不会重新渲染。老实说，我不完全确定您的意思，但无论如何触发重新渲染（如果这是您想要实现的目标），您将需要更改状态。我不确定setGenreObject 在做什么，但您需要确保状态发生了变化。您不能跟踪状态并查看正在发生的事情并从那里进行调试吗？

【解决方案2】：

您可以将 CategoryContainer 包裹在一个括号内，并在genreObject 中存在值时执行它。看看下面的例子。

<CardContainer>
{Object.keys(ClientPdfs).map((ageName, i) => (
    <Card
      onClick={() => setGenreObject(ClientPdfs[ageName])}
      key={i}>
    {!genreObject && (
      <CategoryContainer>
      <Overlay />
      <CategoryPhoto src={ClientPdfs[ageName].image} alt="ages"/>
      <CategoryName>
        {ClientPdfs[ageName].name}
      </CategoryName>
      </CategoryContainer>
    )}
    </Card>
  ))}
</CardContainer>

【讨论】：