仅更新反应中一项的状态

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

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

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

    {node.show ? 

      <div><p className="mb-6 pt-3 text-center">

        {node.description.description}

      </p></div> : null}

    </div>

  })}

</div>