Как получить минимальное значение с помощью react js

#reactjs

#reactjs

Вопрос:

В приведенном ниже коде я пытаюсь выполнить {this.renderCost(data,'mina')} с react js. Я хотел бы получить минимальное значение, total используя приведенный ниже код, но total объекта, значение которого name равно, например, mina (или другому имени, потому что оно будет изменено). Я попробовал следующее: сначала введите значение total using indents.push(elem.total) , ожидаемый результат для этой части — [2000,1000] а затем получите минимальное значение array с помощью Math.min(...indents) , ожидаемый результат для этой части — [1000] но функция не работает.

 const data = [
    {
        "obj": {
            "no": "1",
            "info": [
                {
                    "name": "maya"
                },
                {
                    "name": "mina"
                }
            ],
            "total":"2000"
        }
    },
    {
        "obj": {
            "no": "2",
            "info": [

                {
                    "name": "maya"
                }
            ],
            "total":"1000"
        }
    },
    {
        "obj": {
            "no": "3",
            "info": [
                {
                    "name": "mina"
                },
                {
                    "name": "Mike"
                }
            ],
            "total":"1000"
        }
    }
]
renderCost(data,name){
    let indents = [];
    data.map((elem) => {
         this.renderTotal(elem,name,indents)
        })
    }
renderTotal(elem,name,indents){
        for(let i = 0 ; i < elem.info.length;i  ){
        if (elem.info[i].name == name){
            indents.push(elem.total)
        }
        return (
            Math.min(...indents)
           )
    }
}
  

Ответ №1:

Структура данных, с которой вы работаете, не идеальна для этого конкретного поиска, однако вы можете получить свой ответ с помощью следующего:

 const minTotalByName = (data, name) => {
    
    const totals = data
    .filter(x => 
        x.obj.info.find(y => y.name === name)
     ).map(x => x.obj.total);

    return Math.min(...totals);
}

const min = minTotalByName(data, "mina"); // 1000
  

Ответ №2:

Чтобы найти минимальное значение для name , вы можете использовать приведенный ниже код:

 const { useState } = React;

function App() {
  const [name, setName] = useState("");
  
  const filtered = data
    .filter(obj => obj.obj.info.some(n => n.name === name))
    .map(obj => Number(obj.obj.total));
    
  const min = filtered.length !== 0 ? Math.min(...filtered) : "";

  return (
    <div>
      <input onChange={(e) => setName(e.target.value)} />
      <div>The result is: {min}</div>
    </div>
  );
}

const data = [
  {
    obj: {
      no: "1",
      info: [ { name: "maya" }, { name: "mina" } ],
      total: "2000"
    }
  },
  {
    obj: {
      no: "2",
      info: [ { name: "maya" } ],
      total: "1000"
    }
  },
  {
    obj: {
      no: "3",
      info: [ { name: "maya" }, { name: "Mike" } ],
      total: "1000"
    }
  }
];

ReactDOM.render(<App />, document.getElementById("root"));  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>  

Комментарии:

1. Не забудьте добавить логику для фильтрации элементов, у которых нет имени, по которому выполняется поиск 😉