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

Question

我有一个react组件，它可以获取属性，可以是值的，也可以是未定义的。我需要从数组中找到最低值(一个或多个值可以是未定义的)，并将class添加到具有最低值的"column“列表项中。

假设对象是这样出现的：

[
 {
  "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

在构造函数中的super(props)和this.state = {之间添加以下代码

// Finds the lowest value in the array
let lowestValue = Infinity;
for (let value in props.parsedOffers.values) {
  if (value === undefined) { continue; }

  if (value < lowestValue) { lowestValue = value }
}

然后您可以将lowestValue添加到您的对象状态。之后，您可以将li元素更改为如下所示

<li className={"column r1" + (this.state.r1Price === this.state.lowestValue ? 'lowest' : ''}> ... </li>

Answer 2

这是我基于你的编辑所做的编辑。这行得通吗？

下面是代码的一个链接：https://codesandbox.io/s/lx1x57o7mz

import ReactDOM from "react-dom";
import "./styles.css";
const data = {
  r1: [
    {
      price: 200
    }
  ],
  r2: [
    {
      price: undefined
    }
  ],
  r3: [
    {
      price: 1000
    }
  ]
};
class App extends React.Component {
  constructor(props) {
    super(props);

    let lowestPrice = Infinity;

    console.log("props.parsedOffers", props.parsedOffers);
    for (let record in props.parsedOffers) {
      const price = props.parsedOffers[record][0].price;
      if (price !== undefined && price < lowestPrice) {
        lowestPrice = price;
      }
    }

    this.state = {
      lowestPrice: lowestPrice,
      r1Price: props.parsedOffers[`r1`][0].price
        ? props.parsedOffers[`r1`][0].price
        : "---",
      r2Price: props.parsedOffers[`r2`][0].price
        ? props.parsedOffers[`r2`][0].price
        : "---",
      r3Price: props.parsedOffers[`r3`][0].price
        ? props.parsedOffers[`r3`][0].price
        : "---"
    };
  }

  render() {
    return (
      <ul className="row">
        <li
          class={`column r1 ${
            this.state.r1Price === this.state.lowestPrice ? "lowest" : ""
          }`}
        >
          {this.state.r1Price}
        </li>
        <li
          class={`column r2 ${
            this.state.r2Price === this.state.lowestPrice ? "lowest" : ""
          }`}
        >
          {this.state.r2Price}
        </li>
        <li
          class={`column r3 ${
            this.state.r3Price === this.state.lowestPrice ? "lowest" : ""
          }`}
        >
          {this.state.r3Price}
        </li>
      </ul>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App parsedOffers={data} />, rootElement);```

Answer 3

你有一个对象，而不是一个数组。如果您想获取值最小的属性名称，可以使用Object.entries()、Array.prototype.map()和Array.prototype.sort()，如下所示：

​

const state = {
 r1Price: '200',
 r2Price: undefined,
 r3Price: '1000',
 r4Price: '100',
 r5Price: '120'
};

const lowest = Object.entries(state)
  .map(([k,v]) => [k, v ? +v : Infinity])
  .sort((a, b) => a[1] - b[1])[0];

console.log(lowest);

​

然后，对于每个li，您可以像这样绑定类：

render() {
  const lowest = Object.entries(this.state)
    .map(([k,v]) => [k, v ? +v : Infinity])
    .sort((a, b) => a[1] - b[1])[0][0];

  return (
    <ul class="row">
      <li className={'column r1 ' + lowest === 'r1Price'}>{...}</li>
      <li className={'column r2 ' + lowest === 'r2Price'}>{...}</li>
      <li className={'column r3 ' + lowest === 'r3Price'}>{...}</li>
    </ul>
  );
}