如何在单击时更改状态

Question

在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>

Answer 1

创建一个变量，将其设置为null。让我们称之为卡片。

所以：let card = null

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

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

然后返回{card}作为map函数内部的结果。

Answer 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>