React отображает несколько данных на основе условного массива

Question

Массив

let shippingList = [
{ 'courierName': 'a', 'minWeight': 0.1, 'maxWeight': 5, 'shippingRate': 5.5 },
{ 'courierName': 'b', 'minWeight': 0.1, 'maxWeight': 5, 'shippingRate': 5.0 },
{ 'courierName': 'c', 'minWeight': 0.1, 'maxWeight': 5, 'shippingRate': 4.9 },
{ 'courierName': 'd', 'minWeight': 0.1, 'maxWeight': 5, 'shippingRate': 6.0 },
{ 'courierName': 'a', 'minWeight': 5.0, 'maxWeight': 10.0, 'shippingRate': 7.5 },
{ 'courierName': 'b', 'minWeight': 5.0, 'maxWeight': 10.0, 'shippingRate': 8.5 },
{ 'courierName': 'c', 'minWeight': 5.0, 'maxWeight': 10.0, 'shippingRate': 9.5 },
{ 'courierName': 'd', 'minWeight': 5.0, 'maxWeight': 10.0, 'shippingRate': 10.5 },
]

Если ввести вес, основанный на максимальном весе, то вывести стоимость доставки. Пример:

  ...constructor(props) {
    super(props);
    this.state = { weight: '' };
  }

  myChangeHandler = (event) => {
    this.setState({weight: event.target.value});
  }

      <form>
      <h1>courierA {this._renderShippingFees}</h1>
      <h1>courierB {this._renderShippingFees}</h1>
      <h1>courierC {this._renderShippingFees}</h1>
      <h1>courierD {this._renderShippingFees}</h1>

      <p>Weight:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>

Как вывести несколько тарифов доставки в реальном времени на основе входного веса без создания такого количества состояний, как это

this.setState({ courierA,B,C... })

Начальный метод:

    _renderShippingFees() {
        let weight = this.state.weight

        if (weight <= 5) {
        return (
        <span>$ 5.04</span>
        )
        } else if (weight <= 20) {
        return (
        <span>$ 10.50</span>
        )
        } else if (weight > 30) {
        return (
           <span>$ 20.50</span>
        )
      }

Answer 1

Нет необходимости объявлять несколько переменных состояния , текущий код достаточно хорош.

Попробуйте отфильтровать данные из shippingList, как показано ниже

...

_renderShippingFees(courierName) {
  let shippingRate = 0;
  const { weight } = this.state;
  const inputWeight = isNaN(weight) ? 0 : weight;
  // Filter data from shippingList
  const itemList = shippingList.filter(item => item.courierName === courierName);

  switch (true) {
    case (inputWeight <= 5):
      shippingRate = itemList.find(item => item.maxWeight <= 5).shippingRate;
      break;
    case (inputWeight <= 20):
      shippingRate = itemList.find(item => item.maxWeight <= 20).shippingRate;
      break;
    ...
  }

  return <span>$ {shippingRate}</span>;
}

...
// Call the _renderShippingFees as below in render method
<form>
  <h1>courierA {this._renderShippingFees('a')}</h1>
  <h1>courierB {this._renderShippingFees('b')}</h1>
  <h1>courierC {this._renderShippingFees('c')}</h1>
  <h1>courierD {this._renderShippingFees('d')}</h1>
...