Обновлены все кнопки в событии реагировать на клик

Question

Один щелчок по кнопке обновляет все кнопки, но я хочу изменить состояние этой конкретной нажатой кнопки.Пожалуйста, проверьте ссылки на изображения ниже и код.

import React from 'react';
import './MenuCard.css';

class MenuCard extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        showButton: false,
        hideButton: true,
        aValue: 1,
        breads: [],
        category: [],
        ids: 1,
        btnVal: 'Add'

    };
}

onKeyCheck = (e) => {
    this.state.breads.map(filt => {
        if (filt.id === e.target.id) {
            console.log(e.target.id + ' and ' + filt.id)
            return (this.setState({showButton: !this.state.showButton, hideButton: !this.state.hideButton}));
        }
    })
}

onShowButton = () => {
    this.setState({showButton: !this.state.showButton, hideButton: !this.state.hideButton})
}
onValueIncrease = () => {
    this.setState({aValue: this.state.aValue + 1});
}

onValueDecrease = () => {
    this.setState({aValue: this.state.aValue - 1});
}

componentDidMount() {
    fetch('http://localhost:3000/menu/food_category', {
        method: 'get',
        headers: {'content-type': 'application/json'}
    })
        .then(response => response.json())
        .then(menudata => {
            this.setState({category: menudata.menu_type})
            console.log(this.state.category)
        })

    fetch('http://localhost:3000/menu', {
        method: 'get',
        headers: {'content-type': 'application/json'}
    })
        .then(response => response.json())
        .then(menudata => {
            this.setState({breads: menudata  })
        })
}


render() {

    return (
        <div>
            {this.state.category.map(types => {
                return (<div>
                    <div className="menu-head">{types}</div>
                    < div className="container-menu">
                        {this.state.breads.map((d, id)=> {
                            if (d.category === types) {
                                return (
                                    <div>
                                        <div className="content" key={id} id={d.id}>
                                            <div className="items"> {d.item_name}</div>
                                            <div className="prices"> {d.price} Rs.</div>
                                            {this.state.showButton ?
                                                <div>
                                                    <button
                                                        className="grp-btn-minus"
                                                        onClick={this.state.aValue <= 1 ?
                                                            () => this.onShowButton() :
                                                            () => this.onValueDecrease()}>-
                                                    </button>
                                                    <input className="grp-btn-text" type="text"
                                                           value={this.state.aValue} readOnly/>
                                                    <button id={d.id}
                                                            className="grp-btn-plus"
                                                            onClick={() => this.onValueIncrease()}>+
                                                    </button>
                                                </div> :
                                                <button id={d.id} key={id}
                                                        onClick={ this.onKeyCheck}
                                                        className="add-menu-btn">
                                                    add
                                                </button>
                                            }
                                        </div>
                                    </div>
                                )
                            }
                        })}
                    </div>
                </div>)
            })}
        </div>
    )
}
}

export default MenuCard;

Это первое изображение многократного рендеринга компонента Добавить кнопки

Вот проблемачтобы все кнопки обновлялись одним кликом

Answer 1

Вы используете array элементов, но ссылаетесь на единственное общее значение в обработчиках. Де-факто вы используете несколько общих значений: showButton, hideButton, aValue), 2/3 не нужно;)

Первый - aValue для каждого элемента должен храниться в структуре - array или object. Это может быть order = {} -объект с id -ключаемыми свойствами со значениями в виде значений, подобных этому:

order = {
  'masala_id': 1,
  'kebab_id' : 2
}

Обработчик события (для 'add') должен проверить, существует ли id для выбранного товара, уже существующего в объекте заказа (как имя свойства) и обновить сумму (+/-) или создать новый со значением 1 (и удалить свойство при уменьшении суммы = 0).

На практике order также должен содержать price - он похож на дубликаты данных, но будет намного легче посчитать общую стоимость заказа.

order = {
  'masala_id': {
      'amount': 1,
      'price': 20,
    },
  'kebab_id' : {
      'amount': 2,
      'price': 180,
    }
}

Элемент не обязательно должен быть компонентом, но его гораздо проще поддерживать, сохранять для чтения и т. Д.

Таким образом, мы можем просто передать уже заказанную сумму и условно отобразить кнопки:

<Product id={d.id}
  name={d.item_name}
  price={d.price}
  amount={order[d.id] ? order[d.id].amount : 0 }
  amountHandler={this.changeAmountHandler}
/>

Продукт должен быть немного улучшен и упрощен (например, key необходимо сверху div):

class Product extends React.Component {
  render () {
    const (id, name, price, amount, amountHandler} = this.props;
    const showIncrease = !!amount; // boolean, it also means "don't show add button"
    return (
      <div key={id} >
        <div className="content">
          <div className="items">{name}</div>
          <div className="prices">{price} Rs.</div>
          {showIncrease ?
            <div>
              <button
                className="grp-btn-minus"
                onClick={(e) => { amountHandler(e, id, -1) }}
              >-</button>
              <input className="grp-btn-text" type="text"
                value={amount}
                readOnly/>
              <button 
                className="grp-btn-plus"
                onClick={(e) => { amountHandler(e, id, 1) }}
              >+</button>
            </div> :
            <button 
              onClick={(e) => { amountHandler(e, id, 1) }}
              className="add-menu-btn"
            >add</button>
          }
        </div>
      </div>
    )}}

Таким образом, вы можете обрабатывать все события в одном обработчике, сохранять все состояние порядка в главном компоненте ... в случае проблем с производительностью просто используйте PureComponent.

Answer 2

Похоже, что все кнопки находятся в одном и том же состоянии. Вы можете попробовать разбить кнопку на ее собственный компонент, а затем переместить туда состояние, в котором она нуждается. Таким образом, когда вы нажимаете кнопку, обновляется состояние этой конкретной кнопки, а не состояние родительского компонента, который содержит все кнопки.