состояние обновления только для одного элемента в react

#javascript #reactjs

Вопрос:

Я показываю и скрываю описание элемента, который управляется через состояние. Единственная проблема в том, что я управляю этим состоянием для всех отображаемых элементов на моей странице, что означает, что состояние будет применяться ко всем элементам. Как я могу управлять им только для одного элемента внутри обернутых элементов?

Вот пример того, что я сделал.

Здесь я установил состояние, чтобы не показывать описание:

 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>

1. Я думаю, что ваша переменная состояния должна быть массивом или объектом, который соответствует элементам, которыми вы управляете. Я имею в виду, например, ключи объектов в значительной степени соответствуют идентификаторам элементов, которые вы отслеживаете как скрытые или видимые

2. Хорошо, @ozgur, я думал об этом. Но как мне управлять этим в моем onClick?

3. сколько элементов вы контролируете? Можете ли вы дать более подробную информацию?

4. Это массив элементов, полученных из запроса graphql, это не фиксированная сумма. Это всегда может измениться, зависит от того, сколько добавлено пользователем в серверную часть.

Ответ №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>

1. Я не понимаю этого ответа. Не могли бы вы уточнить, основываясь на моих фрагментах выше?

2. как сказал @Striped. поместите show свойство в свой продукт object . Нравится allProducts =[ {id: '1', name: 'example', description: 'example', show: 'true'}]

3. Это выглядит как самое простое и лучшее решение

4. Хорошо, мне удалось добавить свойство show в свой продукт, но потому, что я не использую state с node. показать, что я не могу заставить свой onClick работать. Я обновил свой исходный пост выше с помощью функции onClick. Как бы я это сделал? Конечно, я должен использовать props тогда правильно?

5. У вас все еще есть глобальное отображение для всех ваших элементов. У вас должно быть свойство show для каждого элемента.