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

在您的构造函数中的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>
  );
}

Answer 4

对象的结构方式，您将需要以下代码来找到最小值。

.qv-object-my-modal {
    z-index: 999 !important;
}

然后在渲染时，可以使用

let lowestNumberValue = Object.values(objData[0]).map(u=>u[0]['price']).sort((a,b)=>a>b)[0];

// above would give 200

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

4 个答案: