Javascript 我想根据勾选的复选框更改价格。如何从onSubmit（）中删除if语句

我希望用户从复选框中选择项目，并根据所选项目提交数字价格。我在这里使用if语句进行了尝试。如何有效地做到这一点？？ 我曾尝试使用此.state.map绘制各州地图，但它也不起作用

  constructor(props) {
    super();
    this.state = {
      check1: false,
      check2: false,
      check3: false,
      check4: false,
    };
    this.onCheckChange = this.onCheckChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onCheckChange(e) {
    this.setState({
      [e.target.name]: e.target.checked,
    });
  }

//**************i want to change this ****************

  onSubmit(e) {
    e.preventDefault();
    var price = 0;
    if (this.state.check1 === true) {
      price = price + 10;
    }
    if (this.state.check2 === true) {
      price = price + 20;
    }
    if (this.state.check3 === true) {
      price = price + 30;
    }
    if (this.state.check4 === true) {
      price = price + 40;
    }
    console.log(price);
  }

  render() {
    return (
      <div>
        <Form onSubmit={onSubmit}>
          checkboxes are placed
        </form>
      </div>
    );
  }
}

export default SellComponent;

---

如果您只是希望减少冗余，并假设模式保持不变，那么对状态值数组的减少可能会起作用

map返回一个长度相等的新数组，它是1-1关系。与array:：map一起使用的回调也应该是纯函数，这意味着它没有任何副作用。与此形成对比的是array:：reduce，它使用纯函数回调并返回单个值，即price，或者array:：forEach，它可能在回调中产生副作用，即它可以更新外部价格，但返回无效

*总和模式：

price = SUM[v, i=0_n] v_i ? (i + 1) * 10) : 0

使用array:：reduce进行价格计算

const computePrice = values =>
  values.reduce((price, value, index) => price + (value ? (index + 1) * 10 : 0), 0);

用法：

onSubmit(e) {
  e.preventDefault();
  const price = computePrice(Object.values(this.state));
  console.log(price);
}

const computePrice=值=> values.reduceprice，value，i=>price+value？i+1*10:0,0； 常量数据=[ [假]，//0 [对]，//10 [假，真]，//20 [假，真，真]，//50 [对，错，对，错]，//40 [真的，真的，真的，真的，真的]，//150 [真，真，假，真，真，假，真，假]，//190 ];

---

generalizedData.forEachstate=>console.log'price'，computePricestate 如果您只是希望减少冗余，并假设模式保持不变，那么对状态值数组的减少可能会起作用

map返回一个长度相等的新数组，它是1-1关系。与array:：map一起使用的回调也应该是纯函数，这意味着它没有任何副作用。与此形成对比的是array:：reduce，它使用纯函数回调并返回单个值，即price，或者array:：forEach，它可能在回调中产生副作用，即它可以更新外部价格，但返回无效

*总和模式：

price = SUM[v, i=0_n] v_i ? (i + 1) * 10) : 0

使用array:：reduce进行价格计算

const computePrice = values =>
  values.reduce((price, value, index) => price + (value ? (index + 1) * 10 : 0), 0);

用法：

onSubmit(e) {
  e.preventDefault();
  const price = computePrice(Object.values(this.state));
  console.log(price);
}

const computePrice=值=> values.reduceprice，value，i=>price+value？i+1*10:0,0； 常量数据=[ [假]，//0 [对]，//10 [假，真]，//20 [假，真，真]，//50 [对，错，对，错]，//40 [真的，真的，真的，真的，真的]，//150 [真，真，假，真，真，假，真，假]，//190 ];

---

generalizedData.forEachstate=>console.log'price'，computePricestate；为什么我不能这样做。州地图@drewreese@VijayPDmap返回一个长度相等的新数组，它是1-1关系。与array:：map一起使用的回调也应该是纯函数，这意味着它没有任何副作用。您只需要迭代数据并计算单个值。您还可以使用array:：forEach实现这一点，其中声明let price=0；首先，计算并总结价格。Array:：reduce只是在第二个参数中声明了这个初始值。@VijayPD我用Array:forEach更新了答案示例，注意它比Array:：reduce更详细一些。您可以使用array:：map并执行相同的计算，语言允许这样做，但您确实不应该使用map，因为它在概念上与forEach不同。为什么我不能这样做呢。states.map@drewreese@VijayPDmap返回一个长度相等的新数组，它是1-1关系。与array:：map一起使用的回调也应该是纯函数，这意味着它没有任何副作用。您只需要迭代数据并计算单个值。您还可以使用array:：forEach实现这一点，其中声明let price=0；首先，计算并总结价格。Array:：reduce只是在第二个参数中声明了这个初始值。@VijayPD我用Array:forEach更新了答案示例，注意它比Array:：reduce更详细一些。您可以使用array:：map并执行相同的计算，语言允许这样做，但您确实不应该使用map，因为它在概念上不同于forEach。