React 基于条件数组渲染多个数据

Question

Array

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 },
]

If input number of weight based on max weight then output shipping rate. Example:

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

How to output multiple shipping rates in real time based on input weight without create so many states like this

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

Initial method:

    _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

No need to declare multiple state variables , the current code is good enough.

Try filtering the data from shippingList similar to below

...

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