在数组中找到最小值并添加类

Question

我有一个react组件，它可以获取可以是值或未定义的道具。我需要从数组中找到最低值（可以定义一个或多个值），然后将类添加到具有最低值的“列”列表项中。

假设对象来像这样：

[

 {

  "r1": [

    {

     price: 200

    }

  ],

  "r2": [

   {

    price: undefined

   }

  ],

  "r3": [

   {

    price: 1000

   }

  ]

 }

]

这是我的组成部分

class PriceList extends React.Component {

 constructor(props) {

  super(props);

  this.state = {

   r1Price: props.parsedOffers[`r1`],

   r2Price: props.parsedOffers[`r2`],

   r3Price: props.parsedOffers[`r3`]

  };

 }

 render() {

  return (

   <ul class="row">

    <li class="column r1">{this.state.r1Price.price ? this.state.r1Price.price : <span>-</span>}</li>

    <li class="column r2">{this.state.r2Price.price ? this.state.r2Price.price : <span>-</span>}</li>

    <li class="column r3">{this.state.r3Price.price ? this.state.r3Price.price : <span>-</span>}</li>

   </ul>

  );

 }

};

export default PriceList;

我希望在呈现的html中应该这样显示：

<ul class="row">

 <li class="column r1 lowest">200</li>

 <li class="column r2">-</li>

 <li class="column r3">1000</li>

</ul>

Answer 1

您有一个对象，而不是数组。如果要获取值最低的属性名称，可以使用Object.entries（），Array.prototype.map（）和Array.prototype.sort（）这样：const state = {&nbsp;r1Price: '200',&nbsp;r2Price: undefined,&nbsp;r3Price: '1000',&nbsp;r4Price: '100',&nbsp;r5Price: '120'};const lowest = Object.entries(state)&nbsp; .map(([k,v]) => [k, v ? +v : Infinity])&nbsp; .sort((a, b) => a[1] - b[1])[0];console.log(lowest);然后，对于每个li，您都可以像这样绑定类：render() {&nbsp; const lowest = Object.entries(this.state)&nbsp; &nbsp; .map(([k,v]) => [k, v ? +v : Infinity])&nbsp; &nbsp; .sort((a, b) => a[1] - b[1])[0][0];&nbsp; return (&nbsp; &nbsp; <ul class="row">&nbsp; &nbsp; &nbsp; <li className={'column r1 ' + lowest === 'r1Price'}>{...}</li>&nbsp; &nbsp; &nbsp; <li className={'column r2 ' + lowest === 'r2Price'}>{...}</li>&nbsp; &nbsp; &nbsp; <li className={'column r3 ' + lowest === 'r3Price'}>{...}</li>&nbsp; &nbsp; </ul>&nbsp; );}