Состояние reactjs - когда я нажимаю, чтобы установить значение, я устанавливаю все - PullRequest
Новая
       20

Состояние reactjs - когда я нажимаю, чтобы установить значение, я устанавливаю все

0 голосов
/ 01 апреля 2020

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

Бэкэнд отправляет список билетов, и я сопоставляю список для рендеринга на входной стороне.

enter image description here

Код: 

export default function Events() {
  const [count, setCount] = useState(1);
  const { data: tickets } = useSWR(`/v1/events/${slug}/tickets`, fetch);

  if (!tickets) {
    return (
      <div>
        <Loading />
      </div>
    );
  }

  return (
    <>
      <CardTickets>
        <TitleTicket>
          <span>Ingressos</span>
        </TitleTicket>
        {tickets.map(ticket => (
          <ContentTicket>
            <h1>{ticket.name}</h1>
            <span>{ticket.description}</span>
            <PositionButton>
              <h1 className="valueTicket">R${ticket.price}</h1>
              <ButtonTicket>
                <button
                  className="buttonLess"
                  onClick={() => setCount(count - 1)}
                >
                  -
                </button>
                <button className="value">{count}</button>
                <button
                  className="buttonMore"
                  onClick={() => setCount(count + 1)}
                >
                  {" "}
                  +{" "}
                </button>
              </ButtonTicket>
            </PositionButton>
            <DetailLeft />
            <DetailRight />
          </ContentTicket>
        ))}
      </CardTickets>
    </>
  );
}

1 Ответ

0 голосов
/ 01 апреля 2020

Как я и думал, вы используете только одно состояние для всех заявок, поэтому

enter image description here

Вы должны создать компонент для заявки и имеет useState там, так что каждый билет будет иметь свое собственное состояние

, например, сделайте этот новый компонент и пропустите билет в качестве реквизита и двигайтесь useState ni there 


<ContentTicket>
            <h1>{ticket.name}</h1>
            <span>{ticket.description}</span>
            <PositionButton>
              <h1 className="valueTicket">R${ticket.price}</h1>
              <ButtonTicket>
                <button
                  className="buttonLess"
                  onClick={() => setCount(count - 1)}
                >
                  -
                </button>
                <button className="value">{count}</button>
                <button
                  className="buttonMore"
                  onClick={() => setCount(count + 1)}
                >
                  {" "}
                  +{" "}
                </button>
              </ButtonTicket>
            </PositionButton>
            <DetailLeft />
            <DetailRight />
          </ContentTicket>
...