仅更新反应中一项的状态

Question

我正在显示和隐藏通过状态管理的项目的描述。唯一的问题是我正在管理页面上所有映射项目的此状态，这意味着该状态将应用于所有项目。我怎样才能只管理包裹物品中的一件物品？

这是我所做的示例。

这里我设置状态为不显示描述：

this.state = {

        show: false

    }

点击它会显示描述，我是这样的：

<div className="mx-auto pb-3">

    {this.state.show ? <div><p className="mb-6 pt-3 text-center">

        {node.description.description}

    </p></div> : null}

</div>

如上所述，这适用于所有像这样包装的映射项：

 <div className="row mx-auto">

 {this.state.allProducts.map(({ node }) => {

....

 })}

</div>

这是我的 onClick 函数

<div className="mx-auto">

    <p className="prd-desc-option" onClick={() => { this.setState({ show: 

    !this.state.show }) }}>{this.state.show ? 'Hide' : 'Show'} Description

    </p>

</div>

Answer 1

show您应该在级别上管理属性allProducts，然后基于它的条件：<div className="row mx-auto">&nbsp; {this.state.allProducts.map(({ node }) => {&nbsp; &nbsp; <div className="mx-auto pb-3">&nbsp; &nbsp; {node.show ?&nbsp;&nbsp; &nbsp; &nbsp; <div><p className="mb-6 pt-3 text-center">&nbsp; &nbsp; &nbsp; &nbsp; {node.description.description}&nbsp; &nbsp; &nbsp; </p></div> : null}&nbsp; &nbsp; </div>&nbsp; })}</div>