状态 reactjs - 当我点击设置值时，我设置了所有答案

【问题标题】：State reactjs - when I click to set the value, I set all状态 reactjs - 当我点击设置值时，我设置了所有
【发布时间】：2020-07-13 06:23:19
【问题描述】：

我有一张门票清单，在门票中，我为用户创建了一个按钮，用于告知他想要购买的门票数量。然而，当他添加一张票时，他最终添加了所有人。

后端发送工单列表，我将列表映射到前端渲染。

代码：

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>
    </>
  );
}

【问题讨论】：

IMO 你的代码看起来不错，你能提供更多代码给我们检查吗，例如父母？
我添加了整个组件

标签： reactjs state jsx

【解决方案1】：

正如我所想，您对所有票只使用一种状态，这就是原因

您应该为工单创建组件并在其中具有 useState，因此每个工单都有自己的状态

例如，将其设为您的新组件，并将票证作为道具传递，然后将useState移到那里


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

【讨论】：