javascript - setState 方法中的 React 16 计数器值在下一个列表项中传播

Question

我已经实现了使用 reduce、setState 方法增加列表项计数值和分配给它们的成本，例如 Tea x 2(点击n 次，这里 2) 然后成本将变为 15 x 2 = 30；取决于点击次数。这是工作。

当我点击第一项时，例如 Tea x 1 = 15 然后点击第二项 twice coffee x 2。
实际发生的是 counter 和 cost 被添加到 coffee item 并且两个项目都将 counter 显示为 Tea x 2还有咖啡 x 2。
预期是点击两次 Tea x 1 和 coffee x 2。所以这里的 setState 或 counter 不处理多个点击值。

我在这里错过了什么？

import React from "react";
import { Container, Row, Col } from "reactstrap";

const MorningDrinks = [
  {
    id: "1",
    name: "Tea",
    cost: 15
  },
  {
    id: "2",
    name: "Coffee",
    cost: 15
  },
  {
    id: "3",
    name: "Milk",
    cost: 15
  }
];

const ChoclateDrinks = [
  {
    id: "4",
    name: "Smothe",
    cost: 15
  },
  {
    id: "5",
    name: "hot Chocolate",
    cost: 15
  }
];

class MenuCard extends React.Component {
  state = {
    selectedItems: [],
    counter: 1
  };

  selectItem = item => {
    if (this.state.selectedItems.includes(item)) {
      this.setState(prevState => ({
        selectedItems: prevState.selectedItems,
        counter: ++this.state.counter
      }));
    } else {
      this.setState(prevState => ({
        selectedItems: prevState.selectedItems.concat(item)
      }));
    }
  };

  render() {
    return (
      <Container>
        <p>
          Welcome {this.props.name} !Pick your any Break-fast menu you want{" "}
        </p>
        <Row>
          <Col xs="3">
            <ul>
              <h2>Morning Drinks </h2>

              {MorningDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {" "}
                  {item.name} {item.cost}{" "}
                </li>
              ))}
            </ul>
            <ul>
              <h2>Chocolate Drinks </h2>
              {ChoclateDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {item.name}
                  {item.cost}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs="3">
            <ul>
              <h2>Your orders </h2>
              {this.state.selectedItems.map((item, i) => (
                <li key={i}>
                  {item.name}
                  {item.cost}
                  {this.state.counter}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs="3">
            <ul>
              <h3>Total</h3>

              {this.state.selectedItems.reduce(
                (acc, item) => acc + item.cost * this.state.counter,
                0
              )}
            </ul>
          </Col>
        </Row>
      </Container>
    );
  }
}

export default MenuCard;

Answer 1

为了维护您的实现，我对您现有的代码做了一些改动。见下文:

import React from 'react';
import { Container, Row, Col } from "reactstrap";

const MorningDrinks = [
  {
    id: "1",
    name: "Tea",
    cost: 15
  },
  {
    id: "2",
    name: "Coffee",
    cost: 15
  },
  {
    id: "3",
    name: "Milk",
    cost: 15
  }
];

const ChoclateDrinks = [
  {
    id: "4",
    name: "Smoothie",
    cost: 15
  },
  {
    id: "5",
    name: "Hot Chocolate",
    cost: 15
  }
];

class MenuCard extends React.Component {
  state = {
    selectedItems: []
  };

  selectItem = item => {
    const { counter, selectedItems } = this.state;
    const newItem = {
      ...item,
      quantity: 1
    };

    // check if item already exist
    const el = selectedItems.filter(el => el.id === newItem.id);

    if (selectedItems.length === 0) {
      this.setState({
        selectedItems: [...selectedItems, newItem]
      });
    } else {

      if (el.length) {
        const newSelectedItems = selectedItems.map((item) => {
          if (item.id === newItem.id) {
            item.quantity++;
          }

          return item;
        });

        this.setState({
          selectedItems: newSelectedItems
        });
      } else {
        this.setState({
          selectedItems: [...selectedItems, newItem]
      });
      }
    }
  };

  render() {
    const { counter, selectedItems } = this.state;
    return (
      <Container>
        <p>
          Welcome {this.props.name}! Pick your any Break-fast menu you want{" "}
        </p>
        <Row>
          <Col xs="3">
            <ul>
              <h2>Morning Drinks </h2>

              {MorningDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {" "}
                  {item.name} {item.cost}{" "}
                </li>
              ))}
            </ul>
            <ul>
              <h2>Chocolate Drinks </h2>
              {ChoclateDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {item.name} {item.cost}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs="3">
            <ul>
              <h2>Your orders </h2>
              {selectedItems.map((item, i) => (
                <li key={i}>
                  {item.name} {item.cost} {item.quantity}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs="3">
            <ul>
              <h3>Total</h3>

              {selectedItems.reduce(
                (acc, item) => acc + item.cost * item.quantity,
                0
              )}
            </ul>
          </Col>
        </Row>
      </Container>
    );
  }
}

export default MenuCard;